# Pathrule Pattern: Tailwind CSS (1.0.0)
# ::pathrule:package:tailwind-css

### [RULE] Use design tokens, not arbitrary values  (path: /src)
<!-- scope: folder | priority: high | advisory -->

Reach for a standard utility before an arbitrary value so markup stays inside the design system.

- Replace one-offs like `w-[137px]`, `text-[#3b82f6]`, or `mt-[13px]` with token utilities (`w-32`, `text-primary`, `mt-3`).
- If a value is genuinely reused, add it to `@theme` as a custom token (for example `--color-brand` or `--spacing-18`) instead of repeating the bracket form.
- Arbitrary values are an escape hatch for true one-offs only; each distinct one emits its own rule and bloats the output CSS.

---

### [RULE] No dynamic class string interpolation  (path: /src)
<!-- scope: folder | priority: high | strict -->

Tailwind scans source as plain text, so any class assembled at runtime is invisible to the compiler and gets purged.

- Do not write `className={`bg-${status}-500`}` or concatenate fragments; the full literal class must appear in source.
- Map state to complete class strings with `class-variance-authority` (cva) or an explicit lookup object, then merge with `cn`.
- If a class truly must be generated, register it through `@source inline(...)` so the compiler keeps it.

---

### [MEMORY] Tailwind v4 is CSS-first via @theme  (path: /src/styles)

Tailwind CSS v4 moved configuration out of JavaScript into your stylesheet, so do not scaffold a `tailwind.config.js`.

- Start the entry stylesheet with `@import "tailwindcss";` then declare tokens in an `@theme { ... }` block (`--color-*`, `--font-*`, `--breakpoint-*`, `--spacing-*`).
- Theme variables become both real CSS custom properties and generated utilities, so `--color-brand` yields `bg-brand`, `text-brand`, and friends automatically.
- Add custom utilities with `@utility` and custom selectors with `@custom-variant` (for example a class- or data-attribute-based `dark` variant) rather than a JS plugin or `darkMode` config key.

---

### [MEMORY] Variant + merge stack: cva, clsx, tailwind-merge  (path: /src/components)

Reusable components compose classes through one shared helper so conflicting utilities resolve predictably.

- Create `cn` once: `export const cn = (...i: ClassValue[]) => twMerge(clsx(i))`, then always merge through it so a later `className` prop wins over base styles.
- Order matters inside `cn`: base styles first, conditional/variant classes next, caller overrides last.
- Declare `cva` variant maps at module scope (not inside render) to avoid recreating them each render, and keep one full class string per variant value.
- Let `prettier-plugin-tailwindcss` own class ordering so reviews stay focused on logic, not sort order.

---

### [SKILL] tailwind-css-review  (path: /)

---
name: tailwind-css-review
description: Review Tailwind CSS v4 changes for token-driven styling, no arbitrary-value or dynamic-class sprawl, CSS-first config, and conflict-safe class merging before merging.
---

# Tailwind CSS review

- [ ] No new arbitrary values (`w-[..]`, `text-[#..]`, `mt-[..px]`); reused values promoted to `@theme` tokens instead.
- [ ] No runtime-interpolated class strings (`bg-${x}-500`); state mapped via cva or a literal lookup, or registered with `@source inline(...)`.
- [ ] Configuration stays CSS-first: tokens live in `@theme`, no `tailwind.config.js` reintroduced.
- [ ] Custom utilities use `@utility` and custom states use `@custom-variant` (including class/data-attribute `dark`), not JS plugins.
- [ ] Component classes merged through the shared `cn` helper so caller overrides win and conflicts resolve.
- [ ] cva variant maps defined at module scope, one full class string per variant value.
- [ ] Classes are sorted by `prettier-plugin-tailwindcss` and the diff is free of manual reordering churn.
- [ ] Responsive, dark, and state variants use real modifiers (`md:`, `dark:`, `hover:`) rather than duplicated bespoke CSS.