question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[BUG] Using no-custom-classname with DaisyUI

See original GitHub issue

Describe 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:

  1. Go to here
  2. Run yarn lint in terminal.
  3. 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:closed
  • Created 2 years ago
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
francoismassartcommented, Jun 28, 2022

Should be fixed in the latest release 3.6.0

Make sure to:

  1. Update the eslint-plugin-tailwindcss package
  2. Restart your editor
  3. Report any issue on this repo
2reactions
francoismassartcommented, Jun 20, 2022

I 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

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found