tailwind-css expert

Tailwind CSS Skill Guide

Objective

Define a repeatable Tailwind workflow for fast, consistent, accessible UI delivery. Includes modern CSS variable theming patterns used in production dashboards.

1) Configuration Baseline

npm i -D tailwindcss @tailwindcss/vite   # Tailwind v4
# or
npm i -D tailwindcss postcss autoprefixer # Tailwind v3

• Create stylesheet entry: @import "tailwindcss"; (v4) or @tailwind base/components/utilities (v3).
• Configure source scanning: v4 auto-detects; v3 uses content globs in tailwind.config.js.
• Add shared breakpoint/container conventions early to avoid layout drift.

2) CSS Variable Token System

Tailwind works best with CSS vars as semantic tokens:

/* globals.css — shadcn/ui convention */
:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --border: 214.3 31.8% 91.4%;
  --ring: 221.2 83.2% 53.3%;
  --radius: 0.5rem;
}
.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --border: 217.2 32.6% 17.5%;
}

Wire into tailwind.config.js:

theme: {
  extend: {
    colors: {
      background: 'hsl(var(--background))',
      foreground: 'hsl(var(--foreground))',
      primary: { DEFAULT: 'hsl(var(--primary))', foreground: 'hsl(var(--primary-foreground))' },
      muted: { DEFAULT: 'hsl(var(--muted))', foreground: 'hsl(var(--muted-foreground))' },
      border: 'hsl(var(--border))',
    },
    borderRadius: { lg: 'var(--radius)', md: 'calc(var(--radius) - 2px)', sm: 'calc(var(--radius) - 4px)' },
  },
}

3) Alternative: Raw CSS Variable Theme (no hsl wrapper)

For custom dashboards that don't use shadcn:

:root {
  --fg:           #0f172a;
  --muted:        #64748b;
  --bg:           #ffffff;
  --bg-elevated:  #f8fafc;
  --border:       rgba(0,0,0,0.08);
  --border-strong:rgba(0,0,0,0.14);
  --accent:       #0d6d8a;
  --accent-fg:    #ffffff;
  --green:        #3ecf8e;
  --yellow:       #eaaf2a;
  --red:          #f57265;
  --blue:         #46afc8;
  --radius:       10px;
  --radius-sm:    6px;
  --radius-lg:    16px;
}
.dark { /* override each var */ }