A set of rules for Tailwind CSS version 4, a utility-based styling system for web interfaces. It explains the newer CSS-first setup and the updated packages and import syntax.

Configuring Tailwind CSS 4, defining design variables in CSS, updating PostCSS, CLI, or Vite setup, and handling older configuration files.

It prevents using Tailwind CSS 3 instructions in a version 4 project, which can lead to incorrect configuration or build errors.

tailwind_v4 — Cursor rule by andyw8

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods

npx agentmods add rules/andyw8/rails_rules/1007-tailwindcss

Clone the repo

git clone --depth 1 https://github.com/andyw8/rails_rules

Per session 0 Nothing until a file matches its globs; then the whole rule loads.

When invoked 2,117 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. Scan, not verified.

Origin 92% copy Near-identical to another mod in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5	$0.00000	$0.02117
Opus 5	$0.00000	$0.01059
Sonnet 5	$0.00000	$0.00423
Haiku 4.5	$0.00000	$0.00212

Measured yesterday against content hash 4063a2e335a9, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

tailwind_v4 scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured yesterday.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

Origin

This is a copy

92% identical to tailwindcss — 63 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.

lib/generators/rails_rules/templates/1007-tailwindcss.mdc · 204 lines

How it starts

The opening of the file, as written. The whole thing — 204 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Tailwind CSS v4

Core Changes

CSS-first configuration: Configuration is now done in CSS instead of JavaScript

Use @theme directive in CSS instead of tailwind.config.js

Example:

@import "tailwindcss";

@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
  --color-avocado-500: oklch(0.84 0.18 117.33);
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
}

Legacy tailwind.config.js files can still be imported using the @config directive:
```
@import "tailwindcss";
@config "../../tailwind.config.js";
```
CSS import syntax: Use @import "tailwindcss" instead of @tailwind directives
- Old: @tailwind base; @tailwind components; @tailwind utilities;
- New: @import "tailwindcss";
Package changes:
- PostCSS plugin is now @tailwindcss/postcss (not tailwindcss)
- CLI is now @tailwindcss/cli
- Vite plugin is @tailwindcss/vite
- No need for postcss-import or autoprefixer anymore
Native CSS cascade layers: Uses real CSS @layer instead of Tailwind's custom implementation

Theme Configuration

CSS theme variables: All design tokens are available as CSS variables
- Namespace format: --category-name (e.g., --color-blue-500, --font-sans)
- Access in CSS: var(--color-blue-500)
- Available namespaces:
  - --color-* : Color utilities like bg-red-500 and text-sky-300
  - --font-* : Font family utilities like font-sans
  - --text-* : Font size utilities like text-xl
  - --font-weight-* : Font weight utilities like font-bold
  - --tracking-* : Letter spacing utilities like tracking-wide
  - --leading-* : Line height utilities like leading-tight
  - --breakpoint-* : Responsive breakpoint variants like sm:*
  - --container-* : Container query variants like @sm:* and size utilities like max-w-md
  - --spacing-* : Spacing and sizing utilities like px-4 and max-h-16
  - --radius-* : Border radius utilities like rounded-sm
  - --shadow-* : Box shadow utilities like shadow-md
  - --inset-shadow-* : Inset box shadow utilities like inset-shadow-xs
  - --drop-shadow-* : Drop shadow filter utilities like drop-shadow-md
  - --blur-* : Blur filter utilities like blur-md
  - --perspective-* : Perspective utilities like perspective-near
  - --aspect-* : Aspect ratio utilities like aspect-video
  - --ease-* : Transition timing function utilities like ease-out
  - --animate-* : Animation utilities like animate-spin

Read the full file on GitHub · 204 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

yesterday First seen · 204 lines · 0 tokens per session scan A 4063a2e335a9

Subscribe to this mod's changes

tailwind_v4 is a cursor rule published in the GitHub repository andyw8/rails_rules (4 stars, last pushed 1y ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 2,117 tokens. A static security scan graded it A with 0 findings. It is 92% identical to tailwindcss, differing in 63 lines, and is treated as a copy.

Frontend css tailwind

tailwind_v4

Getting it into your agent

What it costs to keep this loaded

Grade A, and why

Nothing flagged

This is a copy

How it starts

Tailwind CSS v4

Core Changes

Theme Configuration

What this file has done since we first saw it

Other cursor rules, from other repositories

tailwind-css

tailwind_v4

tinted-ui-tokens-skills

rules

architecture

tailwind-v4-core