[BUG] Using no-custom-classname with DaisyUI
See original GitHub issueDescribe the bug
I am using TailwindCSS with the DaisyUI plugin and am having issues with the no-custom-classname
rule. This plugin will report DaisyUI’s classes as a custom classname and create an eslint warning.
To Reproduce Steps to reproduce the behavior:
- Go to here
- Run
yarn lint
in terminal. - Observe:
/home/projects/vitejs-vite-spjry7/src/main.tsx
7:9 warning Classname 'not-valid' is not a Tailwind CSS class! tailwindcss/no-custom-classname # This one is expected
8:13 warning Classname 'btn' is not a Tailwind CSS class! tailwindcss/no-custom-classname # This is a DaisyUI class and shouldn't cause a warning
Expected behavior
Classes from TailwindCSS plugins such as DaisyUI should not be reported by tailwindcss/no-custom-classname
as a custom classname. This seems like a reasonable behaviour as this eslint plugin has access to the Tailwind configuration.
Hence in the example repository, there should end up being only one eslint error for the class not-valid
.
Issue Analytics
- State:
- Created 2 years ago
- Comments:5 (4 by maintainers)
Top Results From Across the Web
Alert — Tailwind CSS Components - daisyUI
Alert. Alert informs users about important events. Class name, Type. alert, Component, Container element. alert-info. Modifier. Alert with `info` color.
Read more >Add component classes to your HTML - daisyUI
Once you installed daisyUI, you can use component classes like btn , card , etc. So instead of making a button using only...
Read more >daisyUI — Tailwind CSS Components
daisyUI components. Use Tailwind CSS but write fewer class names. A free plugin for Tailwind CSS. Faster development. Cleaner HTML.
Read more >Changelog - Tailwind CSS Components
#Bug Fixes. #1426 collapse uses focus-within instead of focus (#1428) (20c9c30) ... Now only the following color names are required for daisyUI themes....
Read more >daisyUI themes — Tailwind CSS Components
How to use daisyUI themes? daisyUI comes with a number of themes, which you can use with no extra effort. Each theme defines...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Should be fixed in the latest release
3.6.0
Make sure to:
eslint-plugin-tailwindcss
packageI just published a beta version with the fixes listed on #132 https://github.com/francoismassart/eslint-plugin-tailwindcss/tree/fix/no-custom-classname-plugin-support#readme
npm i eslint-plugin-tailwindcss@3.6.0-beta.0
Please give it a try and provide feedback and or issues 👍 Thank you