Tailwind CSS classes flagged as redundant
Problem
Valid Tailwind CSS classes (such as text-zinc-900 and dark:text-zinc-100) are flagged as redundant or incorrect. Warning messages like “‘text-zinc-900’ applies the same CSS properties as ‘dark:text-zinc-100’” appear in markup, although these classes are correct.
There is no “Tailwind CSS” section under Settings | Editor | Inspections, so the related inspection cannot be deactivated or adjusted via the standard interface.
Cause
The warning comes from the Tailwind CSS Language Server that highlights errors and potential bugs right in the editor. Please refer to https://github.com/tailwindlabs/tailwindcss-intellisense#linting for more information.
Resolution
Install the most recent server version:
- Open your command-line shell or the embedded Terminal (
Alt+F12) and type:
npm install -g @tailwindcss/language-server
- Open the Settings dialog and go to Settings | Languages & Frameworks | Style Sheets | Tailwind CSS.
- In the Language Server field, specify the path to the
@tailwindcss/language-serverpackage.
If this doesn't help, disable the inspection:
- Navigate to Settings | Languages & Frameworks | Style Sheets | Tailwind CSS
- In the "lint": {}section, change
"cssConflict"to"ignore", - Restart the language server
Please sign in to leave a comment.
Ignoring it is not the best solution, as it may hide other potential class conflicts. For example:
With
"cssConflict": "ignore", this will not be highlighted:Instead, it is better to use a custom installation of
@tailwindcss/language-server, as described here:https://www.jetbrains.com/help/webstorm/tailwind-css.html#ws_tailwind_configure_language_server