WindsurfTailwind CSSCode Style
Tailwind CSS Windsurf Rules
Windsurf rules for Tailwind CSS: component organization, design system integration, and Tailwind v4 patterns.
.windsurfrules
- Use Tailwind v4's CSS-first configuration with @theme and @layer - Define design tokens in CSS variables linked to Tailwind's theme - Use shadcn/ui or Radix primitives as accessible component base - Apply Tailwind Typography plugin for rich text content rendering - Use @layer components sparingly; prefer JSX component extraction - Test designs at all breakpoints; use Tailwind's responsive modifiers consistently - Use group, peer, and has() variants for sibling/parent state styling - Apply the Tailwind Merge + clsx pattern for conditional class composition
How to use with Windsurf
Create a `.windsurfrules` file in your project root. Windsurf's Cascade AI applies these rules automatically.
#tailwind#windsurf#css#design-system#coding-rules
Related Rules
TypeScript Windsurf Rules
WindsurfTypeScript
Windsurf rules for TypeScript: strict type safety, functional patterns, and modern TypeScript conventions.
Code Style
typescript · windsurfCopy Ready
React Windsurf Rules
WindsurfReact
Windsurf rules for React: modern patterns, performance, and scalable React architecture.
Architecture
react · windsurfCopy Ready
Go Windsurf Rules
WindsurfGo
Windsurf rules for Go: hexagonal architecture, clean code, observability, and production Go patterns.
Architecture
go · windsurfCopy Ready
Rust Windsurf Rules
WindsurfRust
Windsurf rules for Rust: async Rust, WASM, systems programming, and production Rust patterns.
Architecture
rust · windsurfCopy Ready