Button, checkbox/radio and input field design inconsistency

[testtwf]

I'm having design inconsistency issue for button, radio, checkbox, and input in daisyUI component. i'm using prefix to avoid conflict, as per suggestion by the tailwind css & daisy ui documentation.

here in my code -

tw- is a tailwind css prefix and du- is a daisyUi prefix.

Note : daisy ui suggests to use combination of tailwind and daisyui prefix for its classes to avoid conflict with existing CSS. read about it here in the docs

Even after following everything as per docs, I'm having below issue. Please let me know how to fix it. Thank you for the suggestions.

issue 1

• design issue in button. Check the code and screenshot.

<button class="tw-du-btn tw-du-btn-outline ">Default</button>
<button class="tw-du-btn tw-du-btn-outline tw-du-btn-primary ">Primary</button>
<button class="tw-du-btn tw-du-btn-outline tw-du-btn-secondary ">Secondary</button>
<button class="tw-du-btn tw-du-btn-outline tw-du-btn-accent ">Accent</button>

temporary fix for issue 1

• added tw-border-solid class to fix the design inconsistency.

<button class="tw-du-btn tw-du-btn-outline tw-border-solid">Default</button>
<button class="tw-du-btn tw-du-btn-outline tw-du-btn-primary tw-border-solid">Primary</button>
<button class="tw-du-btn tw-du-btn-outline tw-du-btn-secondary tw-border-solid">Secondary</button>
<button class="tw-du-btn tw-du-btn-outline tw-du-btn-accent tw-border-solid">Accent</button>

issue 2

• design issue in input field. Check the code and screenshot.

<label class="tw-du-input tw-du-input-bordered tw-border-solid tw-flex tw-items-center tw-gap-2">
        <input type="text" class="tw-du-grow" placeholder="Search"> 
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="tw-w-4 tw-h-4 tw-opacity-70">
            <path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd"></path>
        </svg>
    </label>

temporary fix for issue 2

• added tw-border-none class to hide the border.

<label class="tw-du-input tw-du-input-bordered tw-border-solid tw-flex tw-items-center tw-gap-2">
        <input type="text" class="tw-du-grow tw-border-none" placeholder="Search"> 
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="tw-w-4 tw-h-4 tw-opacity-70">
            <path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd"></path>
        </svg>
    </label>

Please suggest me how to fix the issue and what are the steps can be taken to adress the issue. below is my tailwind config-

module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require("daisyui")
  ],
  daisyui: {
    themes: false, // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
    darkTheme: "dark", // name of one of the included themes for dark mode
    base: true, // applies background color and foreground color for root element by default
    styled: true, // include daisyUI colors and design decisions for all components
    utils: true, // adds responsive and modifier utility classes
    prefix: "du-", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors, now class name for daisyui component will be tw-du-CLASSNAME(ie. tw-du-alert))
    logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
    themeRoot: ":root", // The element that receives theme color CSS variables
  },
  prefix: 'tw-',
  corePlugins: {
    preflight: false,
  }
}```

[areski]

@testtwf I'm having the same issue, did you find a solution?

[florianjea]

Same here.. I have the same problem

[saadeghi]

  corePlugins: {
    preflight: false,
  }

The problem is, you're disabling Tailwind CSS preflight. This not only breaks daisyUI components, it also breaks any Tailwind CSS class name that relies on those styles.

Here's how you can fix the borders if you really need to disable preflight:
https://play.tailwindcss.com/4qTpirURmO?file=css

@layer base {
  * {
    border-style: solid;
    border-width: 0;
  }
}