@rulepack/tailwind

v0.1.0

Tailwind CSS v4 conventions: CSS-first config via @theme, no tailwind.config.ts, design tokens as CSS vars.

Updated 6/4/20266 files | 4.1 KB
$pnpm dlx rulepack add tailwind

Drops CLAUDE.md / .cursor/rules/* and friends into your project.

Downloads

0

Stars

0

Views

0

Files

6 files | 4.1 KB

tailwind

Tailwind CSS v4 conventions: CSS-first config via @theme, no tailwind.config.ts, design tokens as CSS vars.

npx rulepack add tailwind

What it covers

  • CSS-first setup with @import "tailwindcss" and @tailwindcss/postcss — no tailwind.config.ts / .js
  • Design tokens declared in @theme { ... } and referenced via generated utilities (bg-brand-500) or var(--color-brand-500)
  • No hard-coded design tokens (e.g. #7452fc) in JSX or CSS — always go through the variable
  • Utility-first authoring: utilities in JSX, cn() / clsx() for conditional classes, @apply only when a class set repeats 3+ times
  • Anti-patterns to avoid: JS config files, inline style={{ ... }}, hard-coded colors, long @apply chains

Source

Rules align with the official Tailwind CSS v4 documentation: https://tailwindcss.com/docs

License

MIT