Tailwind Pastel
Tailwind gives you the wall of utilities. Pastel helps you read it — every class tinted by one of six categories (layout, box, typography, surface, motion, other), so your eyes group them before your brain does.
Features
- Category-based coloring — every utility's prefix is colored by category
- 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
- Viewport rendering — highlights visible lines and a 20-line margin, updating as you scroll; split editors share document analysis
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.
Edits inside a single class token update the cached result directly; edits across tokens, structural changes, and large bursts of edits trigger a full rescan. Hidden documents release their caches and are rescanned when shown.
To keep generated or unusually dense files responsive:
- Documents larger than 2,097,152 UTF-16 code units or containing more than 200,000 class tokens are skipped. Highlighting resumes once an edit brings them back within the limits.
- Each editor applies at most 4,000 decoration ranges, visible lines first. Very dense views may be only partially highlighted; scrolling recalculates the visible ranges.
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. |
Development
Run npm test for regression tests, npm run typecheck for TypeScript checks, and npm run build to bundle the extension.
npm run benchmark measures editing work, three-edit bursts, unfinished helper calls, and decoration allocations for multiline and single-line documents with a mocked VS Code API. To compare with an earlier commit, use npm run benchmark -- --baseline <git-ref>. These measurements exclude mock document updates, the debounce wait, VS Code IPC and actual rendering; use an Extension Development Host to check UI behavior.
License
MIT — see LICENSE.md.
| |
