| name | tailwind-patterns |
| description | Tailwind CSS v4 patterns. CSS-first config, container queries, tokens. |
| allowed-tools | Read, Write, Edit, Glob, Grep |
Tailwind CSS v4 Patterns
CSS-first. Native. Fast.
v4 Core
- Config:
@theme { --color-primary: ... }. No JS config.
- Engine: Oxide (Rust). Native JIT.
- Queries: Container queries native (
@container).
Configuration Pattern
@theme {
--color-primary: oklch(0.7 0.15 250);
--font-sans: 'Inter', system-ui;
}
Responsive Patterns
- Mobile First:
w-full md:w-1/2.
- Container:
@container (parent) -> @md: (child).
Dark Mode
- Strategy:
dark:bg-zinc-900.
- Config: Use
media (auto) or selector (manual).
Modern Layouts
- Flex:
flex flex-col gap-4.
- Grid:
grid grid-cols-[auto_1fr].
- Bento:
grid-cols-3 with col-span-2.
Component Extraction
- Rule: Extract if used 3+ times or complex logic.
- Method: React Component >
@apply (discouraged).
🧠 Aletheia Reasoning Protocol (CSS)
1. Generator (Styling)
- Consistency: "Use tokens
--color-primary, not hex".
- Responsive: "Mobile -> Desktop".
- State: "Hover/Focus?".
2. Verifier (Maintenance)
- Clutter: "Too long? Extract.".
- Overlap: "Conflicting breakpoints?".
- Z-Index: "Avoid
z-999".
3. Reviser (Refactoring)
- Component: "Make it reusable.".
- Theme: "Centralize magic numbers.".
🛡️ Security & Safety Protocol (CSS)
- External: Audit CDN fonts/images.
- Injection: Be careful with user HTML + Tailwind.
- Clickjacking: No blocking overlays.
- Phishing: Don't make links look like buttons deceptively.