tailwind-patterns

# Tailwind Patterns Skill

Patterns for using Tailwind CSS effectively.

## Layout Patterns

### Flexbox

```html
<!-- Center content -->
<div class="flex items-center justify-center h-screen">
  <div>Centered content</div>
</div>

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

<!-- Flex direction and wrap -->
<div class="flex flex-col md:flex-row flex-wrap gap-4">
  <div class="flex-1">Item 1</div>
  <div class="flex-1">Item 2</div>
  <div class="flex-1">Item 3</div>
</div>

<!-- Flex grow/shrink -->
<div class="flex">
  <div class="flex-shrink-0 w-16">Fixed</div>
  <div class="flex-grow">Grows</div>
</div>
```

### Grid

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

<!-- Responsive grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
  <div>Card 4</div>
</div>

<!-- Grid spanning -->
<div class="grid grid-cols-4 gap-4">
  <div class="col-span-2">Wide</div>
  <div>Normal</div>
  <div>Normal</div>
</div>

<!-- Auto-fit grid -->
<div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">
  <div>Auto-sized card</div>
</div>
```

### Container

```html
<!-- Centered container -->
<div class="container mx-auto px-4">
  Content with max-width and horizontal padding
</div>

<!-- Custom max-width -->
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
  Content with specific max-width
</div>
```

## Typography

### Text Styles

```html
<!-- Headings -->
<h1 class="text-4xl font-bold text-gray-900">Heading 1</h1>
<h2 class="text-3xl font-semibold text-gray-800">Heading 2</h2>
<h3 class="text-2xl font-medium text-gray-700">Heading 3</h3>

<!-- Body text -->
<p class="text-base text-gray-600 leading-relaxed">
  Body text with comfortable line height
</p>

<!-- Small text -->
<span class="text-sm text-gray-500">Caption text</span>

<!-- T