Tailwind CSS — SKILL.md

---
name: "Tailwind CSS"
description: "Skill for Tailwind CSS — auto-generated from documentation"
version: "1.0.0"
author: "skynet"
category: "dev"
agents: ["claude-code", "codex", "gemini"]
tags: ["tailwindcss", "dev", "auto-generated"]
---

# Tailwind CSS

---
name: Tailwind CSS
description: Use this skill when you need to set up, configure, or work with Tailwind CSS for rapid UI development with utility-first CSS classes
metadata:
  author: skynet
  version: 1.0.0
category: dev
---

# Tailwind CSS Skill Guide

## Quick Setup Commands

### New Project Setup
```bash
# NPM installation
npm install -D tailwindcss
npx tailwindcss init

# With PostCSS and Autoprefixer
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# Yarn installation
yarn add -D tailwindcss
yarn tailwindcss init

# CDN (development only)
# Add to HTML head:
<script src="https://cdn.tailwindcss.com"></script>
```

### Framework-Specific Setup
```bash
# Next.js
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

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

# Create React App
npm install -D tailwindcss
npx tailwindcss init
```

## Configuration Files

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

### tailwind.config.js (Extended)
```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,js,jsx,ts,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a8a',
        }
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
      spacing: {
        '18': '4.5rem',
        '88': '22rem',
      }
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
}
```

### CSS Input File
```css
/* src/input.css or styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom component classes */
@layer components {
  .btn-primary {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}
```

## Build Commands

### CLI Build Process
```bash
# Watch mode (development)
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

# Production build
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify

# With custom config
npx tailwindcss -i ./src/input.css -o ./dist/output.css -c ./tailwind.config.js

# Generate all possible classes (development)
npx tailwindcss -i ./src/input.css -o ./dist/output.css --content "./src/**/*.html"
```

### Package.json Scripts
```json
{
  "scripts": {
    "build-css": "tailwindcss -i ./src/input.css -o ./dist/output.css",
    "watch-css": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch",
    "build-css-prod": "tailwindcss -i ./src/input.css -o ./dist/output.css --minify"
  }
}
```

## Common Patterns

### Responsive Design
```html
<!-- Mobile first approach -->
<div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4">
  <img class="w-16 h-16 md:w-24 md:h-24" src="avatar.jpg" alt="Avatar">
</div>

<!-- Container with responsive padding -->
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
  Content here
</div>
```

### Flexbox Layouts
```html
<!-- Centered content -->
<div class="flex items-center justify-center min-h-screen">
  <div class="text-center">Centered content</div>
</div>

<!-- Navigation bar -->
<nav class="flex items-center justify-between p-6">
  <div class="flex items-center flex-shrink-0">Logo</div>
  <div class="flex items-center space-x-4">Menu items</div>
</nav>
```

### Grid Layouts
```html
<!-- Responsive grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="bg-white p-6 rounded-lg shadow">Card 1</div>
  <div class="bg-white p-6 rounded-lg shadow">Card 2</div>
  <div class="bg-white p-6 rounded-lg shadow">Card 3</div>
</div>

<!-- Dashboard layout -->
<div class="grid grid-cols-12 gap-6">
  <div class="col-span-12 md:col-span-8">Main content</div>
  <div class="col-span-12 md:col-span-4">Sidebar</div>
</div>
```

## Decision Tree: Setup Method

```
Need Tailwind CSS?
├─ YES: New project?
│  ├─ YES: Using framework?
│  │  ├─ Next.js → npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p
│  │  ├─ Vite → npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p
│  │  ├─ CRA → npm install -D tailwindcss && npx tailwindcss init
│  │  └─ Vanilla → npm install -D tailwindcss && npx tailwindcss init
│  └─ NO: Add to existing
│     ├─ Quick test → Use CDN version
│     └─ Production → npm install -D tailwindcss
└─ NO: Consider CSS framework alternatives
```

## Decision Tree: Build Process

```
How to build CSS?
├─ Development
│  ├─ Framework integration → Use framework's build process
│  └─ CLI → npx tailwindcss -i input.css -o output.css --watch
├─ Production
│  ├─ Framework integration → npm run build
│  └─ CLI → npx tailwindcss -i input.css -o output.css --minify
└─ Custom workflow → Configure package.json scripts
```

## Troubleshooting

### Error: "tailwindcss: command not found"
```bash
# Fix: Install tailwindcss locally or globally
npm install -D tailwindcss
# or
npm install -g tailwindcss
```

### Error: "No utility classes in output"
```javascript
// Fix: Check content paths in tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{html,js,jsx,ts,tsx}", // Ensure paths match your file structure
    "./pages/**/*.{js,ts,jsx,tsx}",
  ],
  // ...
}
```

### Error: "PostCSS plugin tailwindcss requires PostCSS 8"
```bash
# Fix: Update PostCSS
npm install -D postcss@latest autoprefixer@latest
# or for older projects
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat
```

### Error: Styles not applying in production
```javascript
// Fix: Ensure purge/content is configured correctly
module.exports = {
  content: [
    // Add all file paths where you use Tailwind classes
    "./src/**/*.{js,jsx,ts,tsx,html}",
  ],
  // ...
}
```

### Error: "Cannot resolve 'tailwindcss/tailwind.css'"
```css
/* Fix: Use correct Tailwind directives in CSS file */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Not: @import 'tailwindcss/tailwind.css'; */
```

### Classes not working in dynamic content
```html
<!-- Problem: Dynamic classes may be purged -->
<div class="bg-{{color}}-500">Won't work</div>

<!-- Solution: Use complete class names or safelist -->
<div class="bg-red-500">Will work</div>
```

```javascript
// Or add to safelist in tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js}"],
  safelist: [
    'bg-red-500',
    'bg-blue-500',
    'bg-green-500',
  ]
}
```

## Performance Optimization

### Production Build
```bash
# Enable minification and purging
NODE_ENV=production npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify
```

### JIT Mode (Just-In-Time)
```javascript
// tailwind.config.js - JIT is default in v3+
module.exports = {
  mode: 'jit', // Only needed for v2.1+
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
  // ...
}
```