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}'], // ... } ```