What is tailwindcss-4?

Guidelines for Tailwind CSS version 4, a utility-based system for styling web pages. They explain its CSS-first configuration, new imports, package names, and theme variables compared with version 3.

Configuring Tailwind CSS 4, defining themes in CSS, importing it into a project, choosing the correct PostCSS, CLI, or Vite package, and reusing older configuration files when needed.

They prevent version-mismatch errors, such as using old configuration files, imports, or build plugins with Tailwind CSS 4.

tailwindcss-4 — Cursor rule by squirrelogic

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/squirrelogic/cursor-rules/tailwindcss-4

Clone the repo

git clone --depth 1 https://github.com/squirrelogic/cursor-rules

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

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

Security scan A 0 findings. Scan, not verified.

Origin 91% 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.02184
Opus 5	$0.00000	$0.01092
Sonnet 5	$0.00000	$0.00437
Haiku 4.5	$0.00000	$0.00218

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

Security

Grade A, and why

tailwindcss-4 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

91% identical to tailwindcss — 72 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.

nextjs/tailwindcss-4.mdc · 215 lines

How it starts

The opening of the file, as written. The whole thing — 215 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 · 215 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 · 215 lines · 2,184 tokens per session scan A e2e3c988fd72

Subscribe to this mod's changes

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

Frontend

tailwindcss-4

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

angular-20

dev-standard

typescript

coolify-ai-docs

python_lib

specs