tailwind-css

What this skill does

# Tailwind CSS - Utility-First Framework

A comprehensive skill for mastering Tailwind CSS, the utility-first CSS framework for rapidly building custom user interfaces. This skill covers core concepts, responsive design patterns, component extraction, dark mode implementation, theme customization, and production optimization.

## When to Use This Skill

Use this skill when:

- Building modern web applications with utility-first CSS approach
- Creating responsive designs that work across all device sizes
- Implementing dark mode and theme switching in applications
- Developing reusable component libraries with consistent styling
- Optimizing CSS performance for production deployments
- Customizing design systems with brand-specific tokens
- Building accessible, mobile-first user interfaces
- Integrating with frameworks like React, Vue, Svelte, or Next.js
- Prototyping and iterating on UI designs rapidly
- Maintaining design consistency across large codebases

## Core Concepts

### Utility-First Philosophy

Tailwind CSS takes a different approach from traditional CSS frameworks:

- **Utility Classes Over Components**: Instead of pre-built components, use single-purpose utility classes
- **Compose in HTML**: Build complex designs by composing utilities directly in your markup
- **No Context Switching**: Stay in your HTML/JSX without jumping to CSS files
- **Design System Built-In**: Consistent spacing, colors, and typography out of the box
- **Responsive by Default**: Every utility has responsive variants built-in
- **JIT Compilation**: Just-in-Time mode generates only the CSS you actually use

### Key Principles

1. **Single Responsibility**: Each class does one thing well
2. **Composability**: Combine utilities to create complex designs
3. **Constraints**: Design system constraints lead to better, more consistent UIs
4. **Flexibility**: Arbitrary values for one-off customizations when needed
5. **Performance**: Minimal CSS output through intelligent purging

## Core Utilities Reference

### Layout Utilities

#### Display
```html
<!-- Block and inline -->
<div class="block">Block element</div>
<span class="inline">Inline element</span>
<div class="inline-block">Inline-block</div>

<!-- Flexbox -->
<div class="flex items-center justify-between">
  <div>Left</div>
  <div>Right</div>
</div>

<!-- Grid -->
<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<!-- Hidden -->
<div class="hidden md:block">Visible on medium screens and up</div>
```

#### Positioning
```html
<!-- Static, relative, absolute, fixed, sticky -->
<div class="relative">
  <div class="absolute top-0 right-0">Top-right corner</div>
</div>

<div class="fixed bottom-4 right-4">Fixed bottom-right</div>
<div class="sticky top-0">Sticky header</div>
```

#### Sizing
```html
<!-- Width and height -->
<div class="w-full h-screen">Full width, viewport height</div>
<div class="w-1/2 h-64">Half width, 16rem height</div>
<div class="w-[750px] h-[500px]">Arbitrary values</div>

<!-- Min/max -->
<div class="min-w-0 max-w-md">Constrained width</div>
<div class="min-h-screen max-h-full">Constrained height</div>
```

### Spacing Utilities

#### Padding and Margin
```html
<!-- All sides -->
<div class="p-4 m-2">Padding 1rem, margin 0.5rem</div>

<!-- Individual sides -->
<div class="pt-8 pb-4 pl-6 pr-2">Individual padding</div>
<div class="mt-4 mb-8 ml-auto mr-auto">Individual margin</div>

<!-- Logical properties -->
<div class="px-4 py-2">Horizontal and vertical</div>
<div class="ps-4 pe-2">Inline start/end (RTL-aware)</div>

<!-- Negative margins -->
<div class="-mt-4 -ml-2">Negative margins for overlap</div>

<!-- Space between -->
<div class="flex space-x-4">Horizontal spacing between children</div>
<div class="flex flex-col space-y-2">Vertical spacing between children</div>
```

### Typography Utilities

#### Font Family, Size, and Weight
```html
<!-- Font families -->
<p class="font-sans">Sans-serif font</p>
<p class="font-serif">Serif font</p>
<p class="font-mono">Monospace font</p>

<!-- Font sizes -->
<p class="text-xs">Extra small (0.75rem)</p>
<p class="text-sm">Small (0.875rem)</p>
<p class="text-base">Base (1rem)</p>
<p class="text-lg">Large (1.125rem)</p>
<p class="text-xl">Extra large (1.25rem)</p>
<h1 class="text-4xl">4XL heading (2.25rem)</h1>

<!-- Font weights -->
<p class="font-light">Light (300)</p>
<p class="font-normal">Normal (400)</p>
<p class="font-medium">Medium (500)</p>
<p class="font-semibold">Semibold (600)</p>
<p class="font-bold">Bold (700)</p>
```

#### Text Styling
```html
<!-- Text alignment -->
<p class="text-left">Left aligned</p>
<p class="text-center">Center aligned</p>
<p class="text-right">Right aligned</p>

<!-- Text color -->
<p class="text-gray-900">Dark gray text</p>
<p class="text-blue-600">Blue text</p>
<p class="text-red-500/75">Red text with 75% opacity</p>

<!-- Text decoration -->
<p class="underline">Underlined text</p>
<p class="line-through">Strikethrough text</p>
<a class="no-underline hover:underline">Hover underline</a>

<!-- Text transform -->
<p class="uppercase">UPPERCASE TEXT</p>
<p class="lowercase">lowercase text</p>
<p class="capitalize">Capitalize Each Word</p>

<!-- Line height and letter spacing -->
<p class="leading-tight">Tight line height</p>
<p class="leading-relaxed">Relaxed line height</p>
<p class="tracking-wide">Wide letter spacing</p>
```

### Color Utilities

#### Background Colors
```html
<!-- Solid backgrounds -->
<div class="bg-white">White background</div>
<div class="bg-gray-100">Light gray background</div>
<div class="bg-blue-500">Blue background</div>
<div class="bg-red-600/50">Red background at 50% opacity</div>

<!-- Gradients -->
<div class="bg-gradient-to-r from-purple-500 to-pink-500">
  Purple to pink gradient
</div>
<div class="bg-gradient-to-br from-blue-400 via-purple-500 to-pink-600">
  Three-color gradient
</div>
```

#### Text and Border Colors
```html
<!-- Text colors -->
<p class="text-gray-900 dark:text-white">Adaptive text color</p>
<p class="text-blue-600 hover:text-blue-800">Interactive text color</p>

<!-- Border colors -->
<div class="border border-gray-300">Gray border</div>
<div class="border-2 border-blue-500">Thick blue border</div>
<div class="divide-y divide-gray-200">Divided children</div>
```

### Border and Rounding Utilities

```html
<!-- Border width -->
<div class="border">1px border</div>
<div class="border-2">2px border</div>
<div class="border-t-4">4px top border only</div>

<!-- Border radius -->
<div class="rounded">0.25rem radius</div>
<div class="rounded-lg">0.5rem radius</div>
<div class="rounded-full">Full circle/pill</div>
<div class="rounded-t-lg">Round top only</div>

<!-- Border style -->
<div class="border-solid">Solid border</div>
<div class="border-dashed">Dashed border</div>
<div class="border-dotted">Dotted border</div>
```

### Shadow and Effects

```html
<!-- Box shadows -->
<div class="shadow-sm">Small shadow</div>
<div class="shadow-md">Medium shadow</div>
<div class="shadow-lg">Large shadow</div>
<div class="shadow-xl">Extra large shadow</div>
<div class="shadow-none hover:shadow-lg">Interactive shadow</div>

<!-- Text shadow -->
<h1 class="text-shadow-lg">Large text shadow</h1>
<p class="text-shadow-sm text-shadow-gray-300">Colored text shadow</p>

<!-- Opacity -->
<div class="opacity-50">50% opacity</div>
<div class="opacity-0 hover:opacity-100">Fade in on hover</div>
```

## Responsive Design

### Breakpoint System

Tailwind uses a mobile-first breakpoint system:

```css
/* Breakpoint reference */
sm: 640px   /* @media (min-width: 640px) */
md: 768px   /* @media (min-width: 768px) */
lg: 1024px  /* @media (min-width: 1024px) */
xl: 1280px  /* @media (min-width: 1280px) */
2xl: 1536px /* @media (min-width: 1536px) */
```

### Responsive Utilities

```html
<!-- Mobile-first approach -->
<div class="w-full md:w-1/2 lg:w-1/3">
  Full width on mobile, half on tablet, third on desktop
</div>

<!-- Responsive flexbox -->
<div cl