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