AI Rules for Tailwind CSS 4
Tailwind CSS 4 uses a CSS-first configuration approach with @theme directives. These rules teach your AI the new v4 syntax, responsive patterns, and dark mode strategies.
npx @findutils/skills add tailwind-45 Tailwind CSS skills available
Tailwind CSS 4 Patterns
Tailwind CSS 4 utility-first patterns, responsive design, and dark mode.
shadcn/ui + Radix UI Component Patterns
Build accessible component libraries with shadcn/ui, Radix primitives, and Tailwind CSS.
Svelte 5 Runes & SvelteKit
Svelte 5 runes system with SvelteKit routing, TypeScript, and Tailwind CSS.
Semantic HTML & Modern CSS
Clean semantic HTML5 with modern CSS features for accessible, maintainable web pages.
NativeWind / Tailwind for React Native
Style React Native apps with Tailwind CSS utility classes using NativeWind, including dark mode, responsive design, and platform-specific styling.
How to Use These Rules
FindUtils Skills auto-detects your AI tool and writes the correct file format:
| AI Tool | Rules File |
|---|---|
| Claude Code | CLAUDE.md (project root) |
| Cursor | .cursor/rules/{name}.mdc |
| GitHub Copilot | .github/copilot-instructions.md |
| Windsurf | .windsurf/rules/ or .windsurfrules |
| Cline | .clinerules (project root) |
| Aider | .aider.conf.yml or CONVENTIONS.md |
| Codex / OpenAI | AGENTS.md (project root) |
| Gemini CLI | GEMINI.md or .gemini/ |
Build Your Full Tailwind CSS Stack
Combine Tailwind CSS with your styling, database, and testing tools using the Stack Builder: