tailwind

# Tailwind CSS Expert

Expert Tailwind CSS patterns for building modern, responsive interfaces.

## Core Principles

1. **Utility-first**: Compose designs directly in markup using utility classes
2. **Responsive by default**: Mobile-first with `sm:`, `md:`, `lg:`, `xl:`, `2xl:` prefixes
3. **Consistent spacing**: Use the spacing scale (4, 8, 12, 16, 20, 24, 32, 40, 48, 64)
4. **Design tokens**: Leverage the default theme or extend it consistently

## Common Patterns

### Layout
```html
<!-- Flexbox centering -->
<div class="flex items-center justify-center">

<!-- Grid layout -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

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

### Typography
```html
<!-- Headings -->
<h1 class="text-3xl font-bold tracking-tight text-gray-900">
<h2 class="text-2xl font-semibold text-gray-800">
<p class="text-base text-gray-600 leading-relaxed">

<!-- Truncation -->
<p class="truncate">  <!-- Single line -->
<p class="line-clamp-3">  <!-- Multi-line -->
```

### Buttons
```html
<!-- Primary -->
<button class="px-4 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">

<!-- Secondary -->
<button class="px-4 py-2 bg-white text-gray-700 font-medium rounded-lg border border-gray-300 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
```

### Cards
```html
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
  <h3 class="text-lg font-semibold text-gray-900">Title</h3>
  <p class="mt-2 text-gray-600">Description</p>
</div>
```

### Forms
```html
<label class="block text-sm font-medium text-gray-700">Email</label>
<input type="email" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
```

## Responsive Design

```html
<!-- Stack on mobile,