| name | tailwind-v4-css-variables-enforcer |
| description | enforce Tailwind CSS v4 syntax and project-specific CSS variables. Trigger when writing styles, reviewing UI code, or fixing design inconsistencies. |
Tailwind v4 Enforcer
Ensure all styles use the correct Tailwind v4 syntax and design tokens.
This skill enforces Tailwind v4 and CSS Variables usage across the repo.
Rules
- Syntax: Use
bg-(--variable) instead of bg-[var(--variable)].
- Colors:
- NEVER use hex codes (
#000, #ff00ff).
- NEVER use default palette (
bg-red-500, text-blue-200).
- ALWAYS use project variables defined in
index.css (e.g., --toxic-green, --void-black).
- Imports: Use
@import "tailwindcss". No @tailwind directives.
Workflow
-
Scan for Violations
- Grep for
# (hex codes).
- Grep for
rgb(, hsl(.
- Grep for
bg-[var(.
-
Map to Tokens
#000000 -> var(--void-black)#00ff00 -> var(--toxic-green)#ff00ff -> var(--mood-pink)
-
Fix Syntax
w-[var(--width)] -> w-(--width)bg-[var(--color)] -> bg-(--color)
Example
Input: "Style this button."
Bad:
<button className="bg-red-500 text-white rounded p-2">
Good:
<button className="bg-(--mood-pink) text-(--void-black) rounded-none p-2 border-2 border-(--void-black)">
Output:
"Converted styles to v4 syntax. Replaced red-500 with --mood-pink."
Skill sync: compatible with React 19.2.6 / Vite 8.0.10 / Tailwind 4.2.4 baseline as of 2026-05-20.
