Tailwind Pastel
Tailwind gives you the wall of utilities. Pastel helps you read it — every class tinted by category, so layout, box, surface, and typography sort themselves out before your eyes do.
So flex items-center gap-4 px-3 py-2 bg-white rounded-lg shadow text-sm font-medium hover:bg-gray-50 stops reading like noise — each utility is painted in its category's hue, and your eyes group them automatically.
Features
- Category-based coloring — every utility's prefix is colored by category, and the entire class gets a subtle underline in the same color
- Variant-aware —
md:hover:bg-red-500 is classified by the bg- utility, ignoring variant prefixes, !important, and negative - markers
- Arbitrary values supported —
w-[calc(100%-2rem)] and bg-[#1a1a1a] are tokenized correctly even with brackets containing spaces or colons
- Helper-aware — picks up class strings inside
clsx(), cn(), cva(), twMerge(), tagged templates (cn`...`), and namespaced calls (lib.cn(...))
- Debounced updates — re-highlights 150ms after edits to stay snappy on large files
Categories
Six high-level groups, chosen so they're visually distinguishable in both light and dark themes (Tailwind 400-shade palette):
| Category |
Color |
Covers |
| Layout |
Blue |
flex, grid, items-*, justify-*, gap-*, positioning, display |
| Box |
Emerald |
sizing (w-*, h-*, size-*) and spacing (p-*, m-*, space-*) |
| Typography |
Amber |
text-*, font-*, leading-*, tracking-*, decorations, transforms |
| Surface |
Pink |
bg-*, border*, rounded*, shadow*, ring*, opacity, blur, etc. |
| Motion |
Violet |
transition*, duration-*, animate-*, transform, translate-* |
| Other |
Gray |
cursor-*, select-*, pointer-events-*, scroll/snap/touch, fallback |
Supported Languages
- TypeScript React (
.tsx)
- JavaScript React (
.jsx)
- HTML
- Vue
- Svelte
- Astro
Detection
Class strings are extracted from two sources:
(1) Class attributes — class, className, ngClass, class:list, plus their bracket-bound Angular forms ([class], [ngClass]). Static strings ("...", '...') and JSX template literals (className={`...`}) without ${} interpolation are supported.
(2) Helper calls — string literals inside any of these helpers are scanned, including namespaced (lib.cn(...)) and tagged template (cn`...`) forms:
clsx, cn, cx, cva, tw, twMerge, twJoin, classNames, classnames
Templates with ${...} interpolation are skipped to keep position mapping accurate.
Configuration
| Setting |
Type |
Default |
Description |
tailwindPastel.enabled |
boolean |
true |
Enable category highlighting |
Commands
| Command |
Description |
Tailwind Pastel: Toggle Highlighting |
Flip tailwindPastel.enabled — writes to workspace settings if defined there, otherwise to global. |
Tailwind Pastel: Inspect Class at Cursor |
Shows the category of the token under the cursor in the status bar (debug helper). |
License
MIT — see LICENSE.md.
| |
