You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Probably you're using @tailwindcss/forms (or another style or plugin) that is affecting form elements.
daisyUI applies styles to class names but @tailwindcss/forms by default, applies styles to all form elements.
If you really need @tailwindcss/forms alongside with daisyUI (which I doubt, because both are doing the same job) consider using its strategy: 'class' config so it only applies style to the elements with specific class name (not all form elements)
Read: #640
daisyUI provides an easier approach for dark mode which is different from Tailwind's dark: prefix
Tailwind's dark mode needs dark: prefix and when your OS is using the dark mode (or you use class option and the add the dark class to HTML tag) all the class names with dark: prefix gets activated.
daisyUI is using another approach:
Your class names are the same. You don't need dark: prefix in all your elements and you don't need to set light / dark colors for all elements manually.
You use one of these color names instead. This colors get their values from CSS variables.
This way we can have more than 2 themes or we can change a color in the entire app by change one variable value. This wouldn't be possible with the way Tailwind CSS darkmode config suggests.
Tailwind CSS darkMode: 'class', config has no effect on daisyUI because its job is something else: activating the class names with dark: prefix.
If you don't want the daisyUI dark theme to be activated when OS is using the dark mode, you can either remove the dark theme from the themes array in config: https://play.tailwindcss.com/K5ZJH1RiLz?file=config
daisyUI is only sending one console.log every time the CSS file is built. It shows you which daisyUI version you're using, how many themes you're using and it also shows you needed warnings if one of your configs are not correct.
Some build tools execute Tailwind CSS multiple times (maybe for performance, maybe for other reasons. I don't know) and that may end up showing you multiple console logs from daisyUI. It's not something we can fix on our end and it's an expected behavior unless your build tool or framework changes their way of processing the CSS.
If the logs are getting annoying, you can safely disable them from config
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
class names are not working
contentconfig ontailwind.config.jsfile is addressing to all your template files and component filesRead more: https://tailwindcss.com/docs/content-configuration
btn-{$color}). If you do this, there is no way for Tailwind CSS to know what class names to generate.Read more: https://tailwindcss.com/docs/content-configuration#dynamic-class-names
Also read: The most common mistake when using Tailwind CSS (and how to fix it)
checkbox/toggle/radio styles are broken
Probably you're using
@tailwindcss/forms(or another style or plugin) that is affecting form elements.daisyUI applies styles to class names but
@tailwindcss/formsby default, applies styles to all form elements.If you really need
@tailwindcss/formsalongside with daisyUI (which I doubt, because both are doing the same job) consider using itsstrategy: 'class'config so it only applies style to the elements with specific class name (not all form elements)themes are not working
tailwind.config.js:https://daisyui.com/docs/themes/
data-themeon your<html>tag:https://daisyui.com/docs/themes/
Tailwind's
dark:prefix is not workingRead: #640
daisyUI provides an easier approach for dark mode which is different from Tailwind's
dark:prefixTailwind's dark mode needs
dark:prefix and when your OS is using the dark mode (or you use class option and the add the dark class to HTML tag) all the class names withdark:prefix gets activated.daisyUI is using another approach:
Your class names are the same. You don't need
dark:prefix in all your elements and you don't need to set light / dark colors for all elements manually.You use one of these color names instead. This colors get their values from CSS variables.
This way we can have more than 2 themes or we can change a color in the entire app by change one variable value. This wouldn't be possible with the way Tailwind CSS darkmode config suggests.
Tailwind CSS
darkMode: 'class',config has no effect on daisyUI because its job is something else: activating the class names withdark:prefix.If you don't want the daisyUI
darktheme to be activated when OS is using the dark mode, you can either remove the dark theme from the themes array in config:https://play.tailwindcss.com/K5ZJH1RiLz?file=config
Or you can set the
darkThemeconfig to another theme name (or a name that doesn't exist):https://play.tailwindcss.com/RzMIuxXOto?file=config
duplicate console.logs?
daisyUI is only sending one console.log every time the CSS file is built. It shows you which daisyUI version you're using, how many themes you're using and it also shows you needed warnings if one of your configs are not correct.
Some build tools execute Tailwind CSS multiple times (maybe for performance, maybe for other reasons. I don't know) and that may end up showing you multiple console logs from daisyUI. It's not something we can fix on our end and it's an expected behavior unless your build tool or framework changes their way of processing the CSS.
If the logs are getting annoying, you can safely disable them from config
How can I change colors for my custom theme?
daisyui > themesconfig like this:https://daisyui.com/docs/themes/#-4
How can I change border radius or apply custom styles for my custom theme?
https://daisyui.com/docs/themes/#-5
https://daisyui.com/docs/themes/#-8
How to add more color names to daisyUI?
Read: https://daisyui.com/blog/how-to-add-new-colors-to-daisyui/
This page is locked to stay clean. If you have a questions, open a new discussion.
Beta Was this translation helpful? Give feedback.
All reactions