Tailwind Prism is a VS Code extension that makes long Tailwind CSS class strings readable again by adding subtle, semantic syntax highlighting.

It highlights Tailwind utilities based on what they mean, variants, modifiers, arbitrary values, so you can scan and edit complex class lists faster, without changing how your editor works.

Features

• Semantic Tailwind highlighting: Variants (hover:, sm:), important modifiers (!), arbitrary values ([data-*]), and utilities are highlighted distinctly.
• Full file or cursor mode: Highlight all Tailwind classes in a file, or only the active class block under your cursor.
• Toggle anytime: Enable or disable Tailwind Prism instantly using a command or keyboard shortcut.
• Color presets & customization: Includes built-in color presets for light and dark themes, with full control over individual colors if needed.
• Works with real-world patterns: Supports className, cn(), clsx(), classnames(), template literals, and conditional class logic.
• Lightweight & non-intrusive: No linting, no formatting, no code transformations. Tailwind Prism only improves readability.