---
name: tailwindcss
description: Guide for implementing Tailwind CSS - a utility-first CSS framework for rapid UI development. Use when styling applications with responsive design, dark mode, custom themes, or building design systems with Tailwind's utility classes.
license: MIT
version: 1.0.0
---
# Tailwind CSS Skill
Tailwind CSS is a utility-first CSS framework that enables rapid UI development by providing pre-built utility classes. It generates optimized CSS at build-time by scanning your project files, resulting in zero runtime overhead and minimal production bundles.
## When to Use This Skill
Use this skill when:
- Building responsive layouts with mobile-first design
- Implementing dark mode and theme customization
- Creating custom design systems with consistent spacing, colors, and typography
- Styling React, Vue, Svelte, or any web framework components
- Prototyping interfaces with rapid visual feedback
- Building production applications with optimized CSS bundles
- Working with state-based styling (hover, focus, disabled, etc.)
- Creating complex layouts with Grid and Flexbox utilities
## Core Concepts
### Utility-First Approach
Tailwind provides low-level utility classes that you apply directly to HTML elements instead of writing custom CSS:
```html
Title
Title
```
**Benefits:**
- No CSS file switching - styles live with markup
- No naming conventions needed
- Automatic dead code elimination
- Consistent design tokens across team
- Fast iteration without CSS bloat
### Build-Time Processing
Tailwind scans your source files at build-time and generates only the CSS classes you actually use:
```javascript
// Tailwind analyzes these files
content: [
"./src/**/*.{js,jsx,ts,tsx}",
"./app/**/*.{js,jsx,ts,tsx}",
"./components/**/*.{js,jsx,ts,tsx}"
]
```
Result: Optimized production bundles with zero runtime overhead.
## Installation & Setup
### Modern Setup with Vite
**Step 1: Install dependencies**
```bash
npm install -D tailwindcss @tailwindcss/vite
# or
pnpm add -D tailwindcss @tailwindcss/vite
# or
yarn add -D tailwindcss @tailwindcss/vite
```
**Step 2: Configure Vite**
```javascript
// vite.config.ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [tailwindcss()]
})
```
**Step 3: Import in CSS**
```css
/* src/index.css */
@import "tailwindcss";
```
**Step 4: Reference stylesheet in HTML**
```html
```
## Responsive Design
### Mobile-First Breakpoints
Tailwind uses a mobile-first approach. Base styles apply to all screen sizes, then use breakpoint prefixes to override at larger sizes:
**Breakpoints:**
- `sm:` - 640px and up
- `md:` - 768px and up
- `lg:` - 1024px and up
- `xl:` - 1280px and up
- `2xl:` - 1536px and up
**Example:**
```html
```
### Container Queries
Style elements based on parent container width:
```html
Responds to parent width
```
## Interactive States
### Hover States
```html
Hover link
Scale on hover
```
### Focus States
```html
```
### Active States
```html
```
### Disabled States
```html
```
### Form States
```html
```
### Group Hover (Parent State)
```html
Text changes when parent is hovered
```
### Peer State (Sibling State)
```html
Invalid email
```
## Dark Mode
### Setup Dark Mode
**Media query approach (automatic):**
```html
Auto switches based on system preference
```
**Class-based approach (manual toggle):**
```javascript
// Add .dark class to element
document.documentElement.classList.toggle('dark')
```
### Dark Mode Utilities
```html
Background
Text
Border
Dark mode card
Content adapts to theme
```
### Dark Mode Toggle Implementation
```javascript
// Store preference
function toggleDarkMode() {
const isDark = document.documentElement.classList.toggle('dark')
localStorage.setItem('theme', isDark ? 'dark' : 'light')
}
// Initialize on load
if (localStorage.theme === 'dark' ||
(!('theme' in localStorage) &&
window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark')
}
```
## Arbitrary Values
Use square brackets for one-off custom values:
**Pixel values:**
```html