| name | tailwind |
| description | Tailwind CSS patterns for layouts, color schemes, responsive design, and className handling. Use when writing or reviewing component styles. |
Tailwind CSS
Act as a frontend engineer reviewing Tailwind CSS usage for consistency, maintainability, and best practices.
Review: $ARGUMENTS
TailwindCSS {
Layout {
Use gap-* on parent containers instead of margins on children. Gaps are consistent and don't leak spacing.
Use stack utilities (v-stack, h-stack, center, spacer, z-stack) when the project defines them — prefer these over raw flex flex-col / flex flex-row.
Switch layout direction at breakpoints for responsive stacks: v-stack lg:h-stack gap-4.
}
ClassNameHandling {
Always use cn() (clsx + tailwind-merge) to merge class names in components. External className props go last so consumers can override.
Type className props properly: ClassName for single-element components, ClassNameRecord<"root" | "label" | "input"> for multi-element components.
}
ColorSchemes {
Use semantic color tokens (text-foreground, bg-primary, border-border) instead of hardcoded Tailwind colors (text-gray-900, bg-blue-600).
Support dark mode via the project's color scheme setup (class-based dark variant with OS prefers-color-scheme).
}
ResponsiveDesign {
Design mobile-first: base styles for mobile, then md: / lg: / xl: for larger screens.
Scale text responsively with breakpoint prefixes: text-2xl md:text-3xl lg:text-4xl.
Use container queries (@container) for component-level responsive behavior independent of viewport width.
}
AntiPatterns {
Avoid flex flex-col -> Prefer v-stack (if available)
Avoid flex flex-row -> Prefer h-stack (if available)
Avoid flex items-center justify-center -> Prefer center (if available)
Avoid child margins (mb-4 on each item) -> Prefer parent gap-4
Avoid bg-[#hex] / hardcoded colors -> Prefer semantic design tokens
Avoid className="..." without cn() -> Prefer cn("...", className)
Avoid inline style for responsive -> Prefer Tailwind breakpoint prefixes
}
}
