-
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 -
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
<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
<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
<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
<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,
}
}``` |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 1 reply
-
@testtwf I'm having the same issue, did you find a solution? |
Beta Was this translation helpful? Give feedback.
-
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 @layer base {
* {
border-style: solid;
border-width: 0;
}
} |
Beta Was this translation helpful? Give feedback.
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