IDE
PHPStorm
TailwindCSS
Workspace Configuration
How to Disable Tailwind CSS Color Hints in className in PHPStorm
Tailwind CSS is a powerful styling tool, but not everyone enjoys when the IDE starts being “too helpful.” If you prefer a minimalist setup and don’t want your editor to automatically add colorful markers in your code, you can disable this option in just a few clicks.
By default, PHPStorm enables color hints inside className — those little color squares next to classes like bg-red-500, text-blue-700, and so on. While they may look nice, they can be distracting, especially if you value clean and readable code.
If you prefer minimalism and want to get rid of these automatic color decorations, here’s how to disable them:
Steps to fix it:
-
Open PHPStorm settings:
File → Settings (or PHPStorm → Preferences on macOS).
-
Go to:
Languages & Frameworks → Style Sheets → Tailwind CSS.
-
Find the colorDecorators option.
-
Set it to false.
After that, the colorful hints will disappear, and your code will look clean and distraction-free again.