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 for Cursor by squirrelogic/cursor-rules

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

agentmods

npx agentmods add rules/squirrelogic/cursor-rules/tailwindcss-4

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

Your own site

<a href="https://agentmods.dev/rules/squirrelogic/cursor-rules/tailwindcss-4"><img src="https://agentmods.dev/badge/rules/squirrelogic/cursor-rules/tailwindcss-4/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/squirrelogic/cursor-rules/tailwindcss-4"><img src="https://agentmods.dev/badge/rules/squirrelogic/cursor-rules/tailwindcss-4.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 2,184 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 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.02184
Opus 5.5	$0.00000	$0.00874
Sonnet 5.5	$0.00000	$0.00437
Haiku 4.5	$0.00000	$0.00218

Measured 1mo ago against content hash e2e3c988fd72, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, 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 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

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.

1mo ago 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.

CSS and styling Frontend

css-styling

CSS architecture, tokens, and styling rules for this Docusaurus site. Apply when creating or modifying components, styles, layouts, or any UI-facing code.

Consensys/doc.linea · 0 tokens

codex-premium-website-skills

Apply Codex Skills standards to frontend, website, motion, accessibility, QA, agent reasoning, and handoff work.

TheGoat395/Codex-Skills · 0 tokens

ui-components

USE WHEN: Building UI components, structuring layouts, and applying styles using Tailwind CSS.

omergulcicek/omergulcicek.com · 0 tokens

css-render-blocking-diagnosis

Cursor rule "css-render-blocking-diagnosis" from adobecom/da-express-milo, covering css render-blocking diagnosis & resolution, critical learning from 98 pagespeed achievement, primary diagnostic protocol, step 1: css blocking symptom recognition and step 2: css loading sequence audit.

adobecom/da-express-milo · 1,102 tokens

z-index

Z-index layering conventions for consistent stacking.

pubky/pubky-app · 0 tokens

shadcn-tailwind-guide

A guide to building new components with shadcn/ui and Tailwind CSS, a utility-based system for styling interfaces.

dtyq/magic · 13 tokens