SKILL.md
Tailwind CSS v4 Styling
This project uses Tailwind CSS v4 with CSS-first configuration. All theme customization is in src/styles.css using @theme inline.
Project Color System
Always prefer semantic colors over raw Tailwind colors. These automatically adapt to dark mode.
Core Semantic Tokens
| Token | Usage | Class Examples |
|---|---|---|
background / foreground |
Page background, main text | bg-background, text-foreground |
card / card-foreground |
Card surfaces | bg-card, text-card-foreground |
popover / popover-foreground |
Dropdowns, tooltips | bg-popover, text-popover-foreground |
primary / primary-foreground |
Primary actions, CTAs | bg-primary, text-primary-foreground |
secondary / secondary-foreground |
Secondary actions | bg-secondary, text-secondary-foreground |
muted / muted-foreground |
Subdued backgrounds, secondary text | bg-muted, text-muted-foreground |
accent / accent-foreground |
Highlights, hover states | bg-accent, text-accent-foreground |
destructive / destructive-foreground |
Danger, delete actions | bg-destructive, text-destructive |
border |
Default border color | border-border |
input |
Form input borders | border-input |
ring |
Focus rings | ring-ring |
Sidebar Colors
Within sidebar components: sidebar, sidebar-foreground, sidebar-primary, sidebar-accent, sidebar-border, sidebar-ring
Chart Colors
For data visualization: chart-1 through chart-5
Styling Patterns
Semantic Over Raw Colors
// GOOD - uses semantic colors, works with dark mode
className="bg-card border-border text-muted-foreground hover:bg-accent"
// AVOID - hardcoded colors don't adapt to theme
className="bg-white border-gray-200 text-gray-500 hover:bg-gray-100"Opacity Modifiers
Use /opacity syntax (NOT deprecated bg-opacity-*):
className="bg-primary/50 border-border/30 text-foreground/80"Common Component Patterns
Button:
className="bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring"Interactive Card:
className="bg-card border border-border hover:border-primary/50 hover:bg-accent/50 transition-colors"Navigation Item:
className={isActive
? "bg-accent text-accent-foreground"
: "text-muted-foreground hover:text-foreground hover:bg-accent/50"
}Status Badges:
// Success
className="bg-green-500/10 text-green-600 border-green-500/30"
// Warning
className="bg-yellow-500/10 text-yellow-600 border-yellow-500/30"
// Info
className="bg-blue-500/10 text-blue-600 border-blue-500/30"Tailwind v4 Specifics
Deprecated Patterns to Avoid
| Deprecated | Use Instead |
|---|---|
@tailwind base/components/utilities |
@import "tailwindcss" |
bg-opacity-50 |
bg-color/50 |
text-opacity-50 |
text-color/50 |
flex-grow / flex-shrink |
grow / shrink |
shadow-sm |
shadow-xs |
rounded-sm |
rounded-xs |
bg-gradient-* |
bg-linear-* |
@layer utilities |
@utility |
v4 Features
Container Queries:
<div className="@container">
<div className="p-4 @lg:p-8 @xl:grid-cols-2">3D Transforms:
className="perspective-1000 rotate-x-12 transform-3d"Enhanced Gradients:
className="bg-linear-45 from-primary to-accent"
className="bg-radial from-primary via-secondary to-accent"New Variants:
className="@starting-style:opacity-0 opacity-100 transition-opacity"
className="not-hover:opacity-50"
className="nth-odd:bg-muted"Border Radius
Project-defined computed values:
rounded-sm=calc(var(--radius) - 4px)rounded-md=calc(var(--radius) - 2px)rounded-lg=var(--radius)(0.625rem)rounded-xl=calc(var(--radius) + 4px)
Dark Mode
Dark mode uses .dark class on parent. Semantic colors auto-adapt—no dark: variants needed:
// Works in both light and dark mode automatically
className="bg-background text-foreground border-border"Reference Files
- Theme configuration:
src/styles.css - Complete utility reference: [UTILITIES.md](UTILITIES.md)