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-server package.

If this doesn't help, disable the inspection:

1. Navigate to  Settings | Languages & Frameworks | Style Sheets | Tailwind CSS
2. In the "lint": {}section, change "cssConflict" to "ignore",
3. Restart the language server