agentmods.dev

tailwind-css-4

tailwind-css-4 is a cursor rule for coding agents from travishorn/cursor-rules-sveltekit. It costs 0 tokens per session (2,221 once invoked), scanned A, a copy of tailwindcss, MIT.

A set of coding rules for Tailwind CSS 4, a tool that adds styles to websites through reusable class names. It explains the newer CSS-based setup and its package changes.

In plain words
What is it for?
Use it when setting up, reviewing, or updating a Tailwind CSS 4 project, including its CSS theme, imports, PostCSS, command-line, or Vite integration.
Why use it?
It helps prevent using Tailwind CSS 3 instructions in a Tailwind CSS 4 project, which can lead to incorrect configuration or build errors.

Cursor rule

not rated 9 1y ago A scan 0 tokens copy · 88% MIT
View the source file travishorn/cursor-rules-sveltekit
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/travishorn/cursor-rules-sveltekit/tailwind-css-4
Clone the repo
git clone --depth 1 https://github.com/travishorn/cursor-rules-sveltekit

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.

agentmods badge for tailwind-css-4

README.md
[![agentmods](https://agentmods.dev/badge/rules/travishorn/cursor-rules-sveltekit/tailwind-css-4.svg)](https://agentmods.dev/rules/travishorn/cursor-rules-sveltekit/tailwind-css-4)
Your own site
<a href="https://agentmods.dev/rules/travishorn/cursor-rules-sveltekit/tailwind-css-4"><img src="https://agentmods.dev/badge/rules/travishorn/cursor-rules-sveltekit/tailwind-css-4.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 88% 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.

ModelPer sessionOnce invoked
Fable 5 $0.00000 $0.02221
Opus 5 $0.00000 $0.01111
Sonnet 5 $0.00000 $0.00444
Haiku 4.5 $0.00000 $0.00222

Measured 3d ago against content hash 9eb2b34a21b4, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

tailwind-css-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 3d 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

88% identical to tailwindcss — 77 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.

tailwind-css-4.mdc · 216 lines

How it starts

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

Tailwind CSS 4

This project uses the newer Tailwind CSS 4 instead of the older, but more common Tailwind CSS 3.

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 · 216 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.

  1. 3d ago First seen · 216 lines · 0 tokens per session scan A 9eb2b34a21b4

Subscribe to this mod's changes

tailwind-css-4 is a cursor rule published in the GitHub repository travishorn/cursor-rules-sveltekit (9 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 88% identical to tailwindcss, differing in 77 lines, and is treated as a copy.

CSS and stylingFrontend
Related

Other cursor rules, from other repositories

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

frontend

Demo Shop frontend guidance.

WoJiSama/skill-based-architecture · 5 tokens

clean-dom

HTML semantic elements, DOM structure, responsive images, forms, CSS, and Tailwind best practices with accessibility a11y.

movahedan/monobun · 0 tokens

ui-components

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

omergulcicek/omergulcicek.com · 0 tokens

ui-components

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

virastack/ai · 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