CSS · Tailwind CSS v4

Tailwind CSS (v4) rules for Cursor

CSS-first configuration and renamed utility rules that stop agents from writing Tailwind v3.

The rule

Save as .cursor/rules/tailwind.mdc. Cursor picks it up on the next request.

.cursor/rules/tailwind.mdc

---
description: Tailwind CSS v4 conventions
globs: **/*.css, **/*.html, **/*.tsx, **/*.jsx, **/*.vue, **/*.svelte
alwaysApply: false
---

- Load Tailwind with @import "tailwindcss" in the main CSS file, not @tailwind base, components and utilities.
- Configure design tokens in CSS with @theme (for example --color-brand), not tailwind.config.js. Use @config only if the project already loads a legacy config.
- Add custom utilities with @utility and custom variants with @custom-variant, not @layer utilities or JavaScript plugins.
- Use the v4 names: shadow-xs, shadow-sm, rounded-xs, rounded-sm, blur-xs, outline-hidden and ring-3 replace the v3 defaults.
- Use opacity modifiers like bg-black/50; bg-opacity-* and text-opacity-* are gone.
- Set border and ring colors explicitly; they default to currentColor.
- Put the important modifier at the end (bg-red-500!) and use parentheses for CSS variables (bg-(--brand-color)).
- Use @reference to the main stylesheet before @apply inside Vue, Svelte or CSS module style blocks.
- Write complete class names in source; never build them with string concatenation, or they will not be detected.

How Cursor loads this rule

Read from the frontmatter above, per Cursor's rules documentation.

  • alwaysApply: false with globs: **/*.css, **/*.html, **/*.tsx, **/*.jsx, **/*.vue, **/*.svelte: attached automatically when a matching file is in context.
  • Keep the .mdc extension. A plain .md file in .cursor/rules is ignored by the rules system.
  • Prefer to generate your own? Type /create-rule in Agent and describe what you want; Cursor saves the file to .cursor/rules.
  • Team Rules come first, then Project Rules like this one, then User Rules. Earlier sources win when guidance conflicts.

Cursor rules setup guideCursor Team RulesLet Cursor run commands without asking

Tailwind CSS (v4) rules for Claude Code, Copilot, Kiro and other agents

The same instructions work as plain Markdown in AGENTS.md, which Codex, Gemini CLI, GitHub Copilot and most other coding agents read.

AGENTS.md (section)

## Tailwind CSS (v4)

- Load Tailwind with @import "tailwindcss" in the main CSS file, not @tailwind base, components and utilities.
- Configure design tokens in CSS with @theme (for example --color-brand), not tailwind.config.js. Use @config only if the project already loads a legacy config.
- Add custom utilities with @utility and custom variants with @custom-variant, not @layer utilities or JavaScript plugins.
- Use the v4 names: shadow-xs, shadow-sm, rounded-xs, rounded-sm, blur-xs, outline-hidden and ring-3 replace the v3 defaults.
- Use opacity modifiers like bg-black/50; bg-opacity-* and text-opacity-* are gone.
- Set border and ring colors explicitly; they default to currentColor.
- Put the important modifier at the end (bg-red-500!) and use parentheses for CSS variables (bg-(--brand-color)).
- Use @reference to the main stylesheet before @apply inside Vue, Svelte or CSS module style blocks.
- Write complete class names in source; never build them with string concatenation, or they will not be detected.
Tailwind CSS (v4) rules for Claude Code.claude/rules/tailwind.md

.claude/rules/tailwind.md

---
paths:
  - "**/*.css"
  - "**/*.html"
  - "**/*.tsx"
  - "**/*.jsx"
  - "**/*.vue"
  - "**/*.svelte"
---

- Load Tailwind with @import "tailwindcss" in the main CSS file, not @tailwind base, components and utilities.
- Configure design tokens in CSS with @theme (for example --color-brand), not tailwind.config.js. Use @config only if the project already loads a legacy config.
- Add custom utilities with @utility and custom variants with @custom-variant, not @layer utilities or JavaScript plugins.
- Use the v4 names: shadow-xs, shadow-sm, rounded-xs, rounded-sm, blur-xs, outline-hidden and ring-3 replace the v3 defaults.
- Use opacity modifiers like bg-black/50; bg-opacity-* and text-opacity-* are gone.
- Set border and ring colors explicitly; they default to currentColor.
- Put the important modifier at the end (bg-red-500!) and use parentheses for CSS variables (bg-(--brand-color)).
- Use @reference to the main stylesheet before @apply inside Vue, Svelte or CSS module style blocks.
- Write complete class names in source; never build them with string concatenation, or they will not be detected.
Tailwind CSS (v4) rules for GitHub Copilot.github/instructions/tailwind.instructions.md

.github/instructions/tailwind.instructions.md

---
applyTo: "**/*.css,**/*.html,**/*.tsx,**/*.jsx,**/*.vue,**/*.svelte"
---

- Load Tailwind with @import "tailwindcss" in the main CSS file, not @tailwind base, components and utilities.
- Configure design tokens in CSS with @theme (for example --color-brand), not tailwind.config.js. Use @config only if the project already loads a legacy config.
- Add custom utilities with @utility and custom variants with @custom-variant, not @layer utilities or JavaScript plugins.
- Use the v4 names: shadow-xs, shadow-sm, rounded-xs, rounded-sm, blur-xs, outline-hidden and ring-3 replace the v3 defaults.
- Use opacity modifiers like bg-black/50; bg-opacity-* and text-opacity-* are gone.
- Set border and ring colors explicitly; they default to currentColor.
- Put the important modifier at the end (bg-red-500!) and use parentheses for CSS variables (bg-(--brand-color)).
- Use @reference to the main stylesheet before @apply inside Vue, Svelte or CSS module style blocks.
- Write complete class names in source; never build them with string concatenation, or they will not be detected.
Tailwind CSS (v4) rules for Kiro.kiro/steering/tailwind.md

.kiro/steering/tailwind.md

---
inclusion: fileMatch
fileMatchPattern: ["**/*.css", "**/*.html", "**/*.tsx", "**/*.jsx", "**/*.vue", "**/*.svelte"]
---

- Load Tailwind with @import "tailwindcss" in the main CSS file, not @tailwind base, components and utilities.
- Configure design tokens in CSS with @theme (for example --color-brand), not tailwind.config.js. Use @config only if the project already loads a legacy config.
- Add custom utilities with @utility and custom variants with @custom-variant, not @layer utilities or JavaScript plugins.
- Use the v4 names: shadow-xs, shadow-sm, rounded-xs, rounded-sm, blur-xs, outline-hidden and ring-3 replace the v3 defaults.
- Use opacity modifiers like bg-black/50; bg-opacity-* and text-opacity-* are gone.
- Set border and ring colors explicitly; they default to currentColor.
- Put the important modifier at the end (bg-red-500!) and use parentheses for CSS variables (bg-(--brand-color)).
- Use @reference to the main stylesheet before @apply inside Vue, Svelte or CSS module style blocks.
- Write complete class names in source; never build them with string concatenation, or they will not be detected.
Tailwind CSS (v4) rules for Antigravity.agents/rules/tailwind.md

.agents/rules/tailwind.md

---
trigger: glob
globs: "**/*.css, **/*.html, **/*.tsx, **/*.jsx, **/*.vue, **/*.svelte"
---

- Load Tailwind with @import "tailwindcss" in the main CSS file, not @tailwind base, components and utilities.
- Configure design tokens in CSS with @theme (for example --color-brand), not tailwind.config.js. Use @config only if the project already loads a legacy config.
- Add custom utilities with @utility and custom variants with @custom-variant, not @layer utilities or JavaScript plugins.
- Use the v4 names: shadow-xs, shadow-sm, rounded-xs, rounded-sm, blur-xs, outline-hidden and ring-3 replace the v3 defaults.
- Use opacity modifiers like bg-black/50; bg-opacity-* and text-opacity-* are gone.
- Set border and ring colors explicitly; they default to currentColor.
- Put the important modifier at the end (bg-red-500!) and use parentheses for CSS variables (bg-(--brand-color)).
- Use @reference to the main stylesheet before @apply inside Vue, Svelte or CSS module style blocks.
- Write complete class names in source; never build them with string concatenation, or they will not be detected.
Tailwind CSS (v4) rules for Devin Desktop (Windsurf).devin/rules/tailwind.md

.devin/rules/tailwind.md

---
trigger: glob
globs: **/*.css, **/*.html, **/*.tsx, **/*.jsx, **/*.vue, **/*.svelte
---

- Load Tailwind with @import "tailwindcss" in the main CSS file, not @tailwind base, components and utilities.
- Configure design tokens in CSS with @theme (for example --color-brand), not tailwind.config.js. Use @config only if the project already loads a legacy config.
- Add custom utilities with @utility and custom variants with @custom-variant, not @layer utilities or JavaScript plugins.
- Use the v4 names: shadow-xs, shadow-sm, rounded-xs, rounded-sm, blur-xs, outline-hidden and ring-3 replace the v3 defaults.
- Use opacity modifiers like bg-black/50; bg-opacity-* and text-opacity-* are gone.
- Set border and ring colors explicitly; they default to currentColor.
- Put the important modifier at the end (bg-red-500!) and use parentheses for CSS variables (bg-(--brand-color)).
- Use @reference to the main stylesheet before @apply inside Vue, Svelte or CSS module style blocks.
- Write complete class names in source; never build them with string concatenation, or they will not be detected.
Tailwind CSS (v4) rules for Cline.clinerules/tailwind.md

.clinerules/tailwind.md

---
paths:
  - "**/*.css"
  - "**/*.html"
  - "**/*.tsx"
  - "**/*.jsx"
  - "**/*.vue"
  - "**/*.svelte"
---

- Load Tailwind with @import "tailwindcss" in the main CSS file, not @tailwind base, components and utilities.
- Configure design tokens in CSS with @theme (for example --color-brand), not tailwind.config.js. Use @config only if the project already loads a legacy config.
- Add custom utilities with @utility and custom variants with @custom-variant, not @layer utilities or JavaScript plugins.
- Use the v4 names: shadow-xs, shadow-sm, rounded-xs, rounded-sm, blur-xs, outline-hidden and ring-3 replace the v3 defaults.
- Use opacity modifiers like bg-black/50; bg-opacity-* and text-opacity-* are gone.
- Set border and ring colors explicitly; they default to currentColor.
- Put the important modifier at the end (bg-red-500!) and use parentheses for CSS variables (bg-(--brand-color)).
- Use @reference to the main stylesheet before @apply inside Vue, Svelte or CSS module style blocks.
- Write complete class names in source; never build them with string concatenation, or they will not be detected.
Tailwind CSS (v4) rules for Continue.continue/rules/tailwind.md

.continue/rules/tailwind.md

---
name: "tailwind"
globs: ["**/*.css", "**/*.html", "**/*.tsx", "**/*.jsx", "**/*.vue", "**/*.svelte"]
---

- Load Tailwind with @import "tailwindcss" in the main CSS file, not @tailwind base, components and utilities.
- Configure design tokens in CSS with @theme (for example --color-brand), not tailwind.config.js. Use @config only if the project already loads a legacy config.
- Add custom utilities with @utility and custom variants with @custom-variant, not @layer utilities or JavaScript plugins.
- Use the v4 names: shadow-xs, shadow-sm, rounded-xs, rounded-sm, blur-xs, outline-hidden and ring-3 replace the v3 defaults.
- Use opacity modifiers like bg-black/50; bg-opacity-* and text-opacity-* are gone.
- Set border and ring colors explicitly; they default to currentColor.
- Put the important modifier at the end (bg-red-500!) and use parentheses for CSS variables (bg-(--brand-color)).
- Use @reference to the main stylesheet before @apply inside Vue, Svelte or CSS module style blocks.
- Write complete class names in source; never build them with string concatenation, or they will not be detected.

Edit this rule and convert it for 11 agents →

More templates

Next.js App RouterTypeScript (strict)React componentsPythonFastAPIFastifyNode.js and ExpressGoRustData science notebooks and pipelinesTesting disciplineSecurity guardrailsVue 3 (Composition API)NuxtSvelteKit (Svelte 5 runes)Angular (standalone components, signals)DjangoLaravelRuby on RailsNestJSSpring BootASP.NET CoreFlutterSwiftUI (iOS)Android (Kotlin, Jetpack Compose)React Native (Expo)Prisma ORM

Get Cursor rules and settings changes by email

When Cursor changes how rules, run modes or settings work, we update these templates from the docs and send a short note. One email a week at most.

Reviewed Oct 20, 2026. Written by AgentAtlas. Adapt it to your codebase before relying on it.