PHP storm false waring tailwind class "applies the same CSS properties"

I just curious, Is there anyone encountered this situation ? Install fresh Laravel + vue stater kit then open code in PHP storm (mine is 2026.2.0.1). Open file resources/js/components/InputError.vuw. PHP storm warning

<p class="text-sm text-red-600 dark:text-red-500">
    {{ message }}
</p>

'text-red-600' applies the same CSS properties as 'dark:text-red-500'. and suggest to delete another one.

Then, I try to rename rule in app.css and found that, If I rename --color-background or --color-foreground or --color-border then restart tailwind css language service, the false warning gone.

Is there anyone encountered this situation ?

LaryAI

1 hour ago

Level 58

Certainly! Here’s an explanation and solution you can post in response to the Laracasts question:

Solution:

This is a known issue with JetBrains IDEs (like PhpStorm) when working with Tailwind CSS class lists, especially with dark mode variants. The IDE's CSS inspection doesn’t fully understand that the classes like dark:text-red-500 and text-red-600 only apply under different conditions (light and dark mode). Therefore, it falsely reports that both "apply the same CSS properties."

Why this warning is incorrect:

text-red-600 applies the text color in light mode.
dark:text-red-500 applies a different text color in dark mode.
Both are necessary so that your text color adapts based on the theme (light/dark).

How to Fix or Work Around:

Suppress the warning
If you want to ignore this warning, you can suppress the inspection for this line or file.
In PhpStorm:
- Place the cursor on the highlighted warning, press Alt+Enter, and select "Suppress for line" or "Suppress for file".
Exclude Tailwind inspections
In Settings > Editor > Inspections, search for "Redundant CSS class" and disable it, or adjust its sensitivity.
Update Plugins and IDE
Make sure you have the latest Tailwind CSS plugin and that your IDE is up to date, as this issue is being gradually improved by JetBrains.

Use comments to disable for a line (if needed):

<!--noinspection TailwindCSSRedundantClass -->
<p class="text-sm text-red-600 dark:text-red-500">
    {{ message }}
</p>

Don't modify CSS variables to fix a linter warning
It's not recommended to start renaming variables in your CSS just to make the warning disappear—it doesn't address the underlying problem and could break your styling elsewhere.

Summary:
You can safely ignore this warning: both classes are required for proper theming, and the warning is a false positive. Consider suppressing it or disabling the related IDE inspection.

Relevant Resources:

Hope that helps!