tailwind-css

What this skill does

# Tailwind CSS Skill

---
progressive_disclosure:
  entry_point:
    - summary
    - when_to_use
    - quick_start
  sections:
    core_concepts:
      - utility_first_approach
      - responsive_design
      - configuration
    advanced:
      - dark_mode
      - custom_utilities
      - plugins
      - performance_optimization
    integration:
      - framework_integration
      - component_patterns
    reference:
      - common_utilities
      - breakpoints
      - color_system
tokens:
  entry: 75
  full: 4500
---

## Summary

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs without writing CSS. It offers responsive design, dark mode, customization through configuration, and integrates seamlessly with modern frameworks.

## When to Use

**Best for:**
- Rapid prototyping with consistent design systems
- Component-based frameworks (React, Vue, Svelte)
- Projects requiring responsive and dark mode support
- Teams wanting to avoid CSS file maintenance
- Design systems with standardized spacing/colors

**Consider alternatives when:**
- Team unfamiliar with utility-first approach (learning curve)
- Project requires extensive custom CSS animations
- Legacy browser support needed (IE11)
- Minimal CSS footprint required without build process

## Quick Start

### Installation

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

# yarn
yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# pnpm
pnpm add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

### Configuration

**tailwind.config.js:**
```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./public/index.html",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

### Basic CSS Setup

**styles/globals.css:**
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

### First Component

```jsx
// Simple button with Tailwind utilities
function Button({ children, variant = 'primary' }) {
  const baseClasses = "px-4 py-2 rounded-lg font-medium transition-colors";
  const variants = {
    primary: "bg-blue-600 text-white hover:bg-blue-700",
    secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300",
    danger: "bg-red-600 text-white hover:bg-red-700"
  };

  return (
    <button className={`${baseClasses} ${variants[variant]}`}>
      {children}
    </button>
  );
}
```

---

## Core Concepts

### Utility-First Approach

Tailwind provides single-purpose utility classes that map directly to CSS properties.

#### Layout Utilities

**Flexbox:**
```jsx
// Centered flex container
<div className="flex items-center justify-center">
  <div>Centered content</div>
</div>

// Responsive flex direction
<div className="flex flex-col md:flex-row gap-4">
  <div className="flex-1">Column 1</div>
  <div className="flex-1">Column 2</div>
</div>

// Flex wrapping and alignment
<div className="flex flex-wrap items-start justify-between">
  <div className="w-1/2 md:w-1/4">Item</div>
  <div className="w-1/2 md:w-1/4">Item</div>
</div>
```

**Grid:**
```jsx
// Basic grid
<div className="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

// Responsive grid
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
  <div className="col-span-1 md:col-span-2">Wide item</div>
  <div>Item</div>
  <div>Item</div>
</div>

// Auto-fit grid
<div className="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">
  <div>Auto-sized item</div>
  <div>Auto-sized item</div>
</div>
```

#### Spacing System

**Padding and Margin:**
```jsx
// Uniform spacing
<div className="p-4">Padding all sides</div>
<div className="m-8">Margin all sides</div>

// Directional spacing
<div className="pt-4 pb-8 px-6">Top 4, bottom 8, horizontal 6</div>
<div className="ml-auto mr-0">Right-aligned with margin</div>

// Negative margins
<div className="mt-4 -mb-2">Overlap bottom</div>

// Responsive spacing
<div className="p-2 md:p-4 lg:p-8">Responsive padding</div>
```

**Space Between:**
```jsx
// Gap between children
<div className="flex gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

// Responsive gap
<div className="grid grid-cols-3 gap-2 md:gap-4 lg:gap-6">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
```

#### Typography

```jsx
// Font sizes and weights
<h1 className="text-4xl font-bold">Heading</h1>
<p className="text-base font-normal leading-relaxed">Paragraph</p>
<span className="text-sm font-medium text-gray-600">Caption</span>

// Text alignment and decoration
<p className="text-center underline">Centered underlined text</p>
<p className="text-right line-through">Right-aligned strikethrough</p>

// Responsive typography
<h1 className="text-2xl md:text-4xl lg:text-6xl font-bold">
  Responsive heading
</h1>

// Text overflow handling
<p className="truncate">This text will be truncated with ellipsis...</p>
<p className="line-clamp-3">
  This text will be clamped to 3 lines with ellipsis...
</p>
```

#### Colors

```jsx
// Background colors
<div className="bg-blue-500">Blue background</div>
<div className="bg-gray-100 dark:bg-gray-800">Adaptive background</div>

// Text colors
<p className="text-red-600">Red text</p>
<p className="text-gray-700 dark:text-gray-300">Adaptive text</p>

// Border colors
<div className="border border-gray-300 hover:border-blue-500">
  Hover border
</div>

// Opacity modifiers
<div className="bg-blue-500/50">50% opacity blue</div>
<div className="bg-black/25">25% opacity black</div>
```

### Responsive Design

Tailwind uses mobile-first breakpoint system.

#### Breakpoints

```javascript
// Default breakpoints (tailwind.config.js)
{
  theme: {
    screens: {
      'sm': '640px',   // Small devices
      'md': '768px',   // Medium devices
      'lg': '1024px',  // Large devices
      'xl': '1280px',  // Extra large
      '2xl': '1536px', // 2X extra large
    }
  }
}
```

#### Responsive Patterns

```jsx
// Hide/show at breakpoints
<div className="hidden md:block">Visible on desktop</div>
<div className="block md:hidden">Visible on mobile</div>

// Responsive layout
<div className="
  flex flex-col          // Mobile: stack vertically
  md:flex-row           // Desktop: horizontal
  gap-4 md:gap-8        // Larger gap on desktop
">
  <aside className="w-full md:w-64">Sidebar</aside>
  <main className="flex-1">Content</main>
</div>

// Responsive grid
<div className="
  grid
  grid-cols-1           // Mobile: 1 column
  sm:grid-cols-2        // Small: 2 columns
  lg:grid-cols-3        // Large: 3 columns
  xl:grid-cols-4        // XL: 4 columns
  gap-4
">
  {items.map(item => <Card key={item.id} {...item} />)}
</div>

// Container with responsive padding
<div className="
  container mx-auto
  px-4 sm:px-6 lg:px-8
  max-w-7xl
">
  <h1>Responsive container</h1>
</div>
```

### Configuration

#### Theme Extension

**tailwind.config.js:**
```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          500: '#0ea5e9',
          900: '#0c4a6e',
        },
        accent: '#ff6b6b',
      },
      spacing: {
        '18': '4.5rem',
        '88': '22rem',
        '128': '32rem',
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        display: ['Poppins', 'sans-serif'],
        mono: ['Fira Code', 'monospace'],
      },
      fontSize: {
        '2xs': '0.625rem',
        '3xl': '2rem',
      },
      borderRadius: {
        '4xl': '2rem',
      },
      boxShadow: {
        'inner-lg': 'inset 0 2px 4px 0 rgb(0 0 0 / 0.1)',
      },
      animation: {
        'slide-in': 'slideIn 0.3s ease-out',
        'fade-in': 'fadeIn 0.2s ease-in',
      },
      keyframes: {
        slideIn: {
          '0%': { transform: 'translateX(-100%)' },
          '100%': { tra