tailwindlisted

Enforce Tailwind CSS v4 utility-first conventions. Use when editing .vue/.astro/.html/.tsx/.jsx/.css or when the user mentions Tailwind, utility class, styling a UI element, layout, spacing, or dark mode, or wants to replace raw/scoped CSS. Forbids <style> blocks and deprecated v4 utilities; forces oklch() colors and v4 syntax. Do NOT use without Tailwind v4, on backend code, or for non-styling refactors.
zhaojiannet/canon · ★ 1 · Web & Frontend · score 77

Install: claude install-skill zhaojiannet/canon

This skill enforces Tailwind CSS v4 conventions. The rule is utility-first: express styling through class composition, not raw CSS files. Apply only when the project uses `tailwindcss ^4.0` or higher. If `package.json` pins an older major, **STOP** and ask the user before applying — do not write compatibility shims. ## Core principles - **Express styling through utilities**, not custom CSS. If a utility (or composition + static arbitrary values) covers it, use it. - **State and responsiveness use variants**, not JS class toggles. Use `hover:` `focus:` `disabled:` `checked:` `group-*:` `peer-*:` `has-[*]:` `aria-*:` `data-*:` `*:` `**:` for state, and `md:` / `@container @md:` for size. - **Theme tokens go in `@theme`** with namespace prefixes (`--color-*`, `--spacing-*`, `--breakpoint-*`, `--radius-*`, `--shadow-*`, `--font-*`, `--text-*`, etc.). Non-namespaced variables go in `:root`. Custom colors use `oklch()` to match the v4 palette. - **Class-based dark mode is configured in CSS**: `@custom-variant dark (&:where(.dark, .dark *));`. Not in JS config. - **Vite projects use `@tailwindcss/vite`**, not `@tailwindcss/postcss`. ## Forbidden patterns ### Config / build - `tailwind.config.js`/`.ts` with `theme` / `content` / `darkMode` — express in CSS via `@theme` / `@source` / `@custom-variant` - `@tailwind base/components/utilities` — use `@import "tailwindcss";` - `@tailwindcss/postcss` in Vite projects — use `@tailwindcss/vite` - Manual `postcss-import` / `autoprefixer