FAQ
Frequently Asked Questions – Common problems and how to fix
Class names are not working
- Make sure you're not using dynamic class names (half-variable like
btn-{$color}). If you do this, there is no way for Tailwind CSS to find your class names. - Try using
@sourceExplicitly register sources
CSS files is too big
Using Tailwind CSS and daisyUI, it is expected for CSS files to be very small. Ideally only the class names you used must be in the CSS file. Sometimes (specially in monorepos) it is possible that Tailwind CSS automatic class name detection finds some unwanted strings in your project and generate styles for them. To avoid this, you can disable automatic detection and register your source files using @source directive.
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/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)
Themes are not working
- Add the themes you want
- Enable a theme using
data-themeon your<html>tag: - If you're using a custom theme make sure you're using all the required CSS variables
Tailwind's prefix is not workingdark:Tailwind's prefix is not working
With daisyUI, you don't need to manually set colors using dark: variant
As long as you use daisyUI colors they will work on all themes, light or dark.
If you really want to use Tailwind's dark: variant, here's how to do it.
