CURSOR RULESTailwind CSS v4 Cursor Rules (.mdc) | Free & Offline
Production-grade architectural rulebook for Tailwind CSS v4. Engineered to eliminate LLM hallucinations, enforce strict deterministic conventions, and prevent architectural drift across Cursor IDE, Claude Code CLI, and autonomous multi-agent pipelines.
.cursor/rules/tailwind-v4.mdcFailure Patterns Prevented for Tailwind CSS v4
Tailwind CSS v4 is an entirely new CSS-first engine that completely replaces javascript-based `tailwind.config.js` with native `@theme` directives in CSS. Outdated LLMs continually hallucinate obsolete tailwind.config.js configurations.
- Invokes deprecated or removed APIs from older model training weights
- Generates conflicting configuration files and invalid imports
- Silently drops type-safety, boundaries, or transaction isolation
Code Standards: Anti-Pattern vs Verified Implementation
// Discouraged in v4: Obsolete tailwind.config.js
module.exports = {
theme: {
extend: { colors: { brand: "#f97316" } }
}
};@import "tailwindcss";
@theme {
--color-brand-primary: #f97316;
--font-display: "Geist Sans", sans-serif;
}Where to Save This Rule in Your Repository
Export the rules from the interactive editor above or download the full ZIP bundle. Ensure the file is placed at the exact path below relative to your project root so the AI engine automatically loads it:
Cursor Rules (.mdc) Directory & Generator
Inspect the complete specification manual, glob patterns, directory rules, and all available presets in our central directory.
Technical FAQ: Tailwind CSS v4 AI Rulebooks
Does Tailwind v4 use tailwind.config.js?
No. Tailwind CSS v4 is configured directly in CSS files using the `@theme` directive.