Tailwind CSS Skill

Utility-first CSS framework for rapid, consistent UI development.

Quick Start

Installation

# npm
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# pnpm
pnpm add -D tailwindcss postcss autoprefixer
pnpm dlx tailwindcss init -p

Configuration

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

CSS Setup

/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Core Concepts

Examples

Templates

Quick Reference

Spacing Scale

Breakpoints

Common Utilities

// Layout
<div className="flex items-center justify-between" />
<div className="grid grid-cols-3 gap-4" />
<div className="container mx-auto px-4" />

// Spacing
<div className="p-4 m-2 space-y-4" />
<div className="px-6 py-3 mt-4 mb-8" />

// Typography
<h1 className="text-4xl font-bold tracking-tight" />
<p className="text-sm text-muted-foreground leading-relaxed" />

// Colors
<div className="bg-primary text-primary-foreground" />
<div className="bg-slate-100 dark:bg-slate-900" />

// Borders & Effects
<div className="rounded-lg border shadow-sm" />
<div className="ring-2 ring-primary ring-offset-2" />

// Sizing
<div className="w-full h-screen max-w-md min-h-[200px]" />

// Position
<div className="relative absolute top-0 left-0 z-10" />
<div className="fixed bottom-4 right-4 sticky top-0" />

State Variants

// Hover, Focus, Active
<button className="hover:bg-primary/90 focus:ring-2 active:scale-95" />

// Disabled
<button className="disabled:opacity-50 disabled:cursor-not-allowed" />

// Group hover
<div className="group">
  <span className="group-hover:text-primary" />
</div>

// Focus within
<div className="focus-within:ring-2" />

// First/Last child
<li className="first:pt-0 last:pb-0" />

Responsive Patterns

// Mobile-first responsive
<div className="text-sm md:text-base lg:text-lg" />
<div className="flex-col md:flex-row" />
<div className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-4" />
<div className="hidden md:block" />
<div className="md:hidden" />

Dark Mode

// Dark mode variants
<div className="bg-white dark:bg-slate-950" />
<p className="text-slate-900 dark:text-slate-100" />
<div className="border-slate-200 dark:border-slate-800" />

Best Practices

1. Mobile-first: Start with mobile styles, add breakpoint prefixes for larger screens
2. Consistent spacing: Use the spacing scale (4, 8, 12, 16, 24, 32, 48, 64)
3. Semantic colors: Use design tokens (primary, muted, destructive) over raw colors
4. Component extraction: Use @apply sparingly, prefer component abstraction
5. Arbitrary values: Use [value] syntax for one-off values: w-[237px]

Integration with shadcn/ui

Tailwind CSS is the styling foundation for shadcn/ui. The shadcn skill covers:

• CSS variables for theming
• Component-specific utility patterns
• Design token integration

See shadcn skill for component-specific patterns.