A set of rules for using Tailwind CSS version 4, a CSS framework for styling web pages. It explains the newer CSS-first setup and the package and import changes from older Tailwind versions.

Use it when writing Tailwind CSS 4 styles, configuring theme variables, importing Tailwind, choosing the correct PostCSS, CLI, or Vite package, and handling older configuration files.

It helps avoid configuration and package mistakes when setting up or editing Tailwind CSS 4 projects.

tailwindcss — Cursor rule for Cursor by davis7dotsh/river

Install

Getting it into your agent

It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.

Clone the repo

git clone --depth 1 https://github.com/davis7dotsh/river

agentmods

npx agentmods add rules/davis7dotsh/river/tailwindcss

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/davis7dotsh/river/tailwindcss/github.svg)](https://agentmods.dev/rules/davis7dotsh/river/tailwindcss)

Your own site

<a href="https://agentmods.dev/rules/davis7dotsh/river/tailwindcss"><img src="https://agentmods.dev/badge/rules/davis7dotsh/river/tailwindcss/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/rules/davis7dotsh/river/tailwindcss"><img src="https://agentmods.dev/badge/rules/davis7dotsh/river/tailwindcss.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

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

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

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found 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.01890
Opus 5.5	$0.00000	$0.00756
Sonnet 5.5	$0.00000	$0.00378
Haiku 4.5	$0.00000	$0.00189

Measured 1mo ago against content hash 6c66090f4dac, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

tailwindcss 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 1mo 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

Copies of this mod

4 near-identical copies found in the catalogue:

tailwind_v4 — 92% identical, 63 lines differ
tailwindcss-4 — 91% identical, 72 lines differ
tailwind_v4 — 91% identical, 386 lines differ
tailwind-css-4 — 88% identical, 77 lines differ

.cursor/rules/tailwindcss.mdc · 171 lines

How it starts

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

1mo ago First seen · 171 lines · 1,890 tokens per session scan A 6c66090f4dac

Subscribe to this mod's changes

tailwindcss is a cursor rule published in the GitHub repository davis7dotsh/river (228 stars, last pushed 6mo ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 1,890 tokens. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

CSS and styling Frontend ai streaming svelte sveltekit

tailwindcss

Getting it into your agent

Wrote this? Show the measurements

What it costs to keep this loaded

Grade A, and why

Nothing flagged

Copies of this mod

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

cursor-shadcn-svelte

tailwind-v4

svelte

testing

project

best-practices