Rules for using Tailwind CSS version 4, a system for styling web pages with reusable CSS utilities. They cover its CSS-based configuration, imports, packages, and theme variables.

Use them when setting up or updating Tailwind CSS 4 projects, especially the theme, PostCSS, CLI, Vite, and CSS configuration.

They prevent version-mismatch errors, such as using older configuration files or package names with Tailwind CSS 4.

tailwind_v4 — Cursor rule for Cursor by ctxs-ai: Rules for using Tailwind CSS version 4, a system…

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/ctxs-ai/ctxs.ai/tailwind-css-v4

Clone the repo

git clone --depth 1 https://github.com/ctxs-ai/ctxs.ai

Made for: Cursor.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/rules/ctxs-ai/ctxs.ai/tailwind-css-v4.svg)](https://agentmods.dev/rules/ctxs-ai/ctxs.ai/tailwind-css-v4)

Your own site

<a href="https://agentmods.dev/rules/ctxs-ai/ctxs.ai/tailwind-css-v4"><img src="https://agentmods.dev/badge/rules/ctxs-ai/ctxs.ai/tailwind-css-v4.svg" alt="Measured on agentmods" height="20"></a>

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

When invoked 2,221 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.1	$0.00000	$0.02221
Opus 5	$0.00000	$0.01111
Sonnet 5	$0.00000	$0.00444
Haiku 4.5	$0.00000	$0.00222

Measured 6d ago against content hash 02648b84f28e, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-05, 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 6d ago.

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 — 386 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.

site/.cursor/rules/tailwind-css-v4.mdc · 217 lines

How it starts

The opening of the file, as written. The whole thing — 217 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 · 217 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.

6d ago First seen · 217 lines · 0 tokens per session scan A 02648b84f28e

Subscribe to this mod's changes

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

CSS and styling Frontend LLM ai css prompt-engineering tailwind

tailwind_v4

Getting it into your agent

Wrote this? Show the measurements

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

design

shadcn-tailwind-guide

performance-optimization

tinted-ui-tokens-skills

token-the-ripper