tailwind-utility-classes

# Tailwind CSS - Utility Classes

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs without leaving your HTML.

## Key Concepts

### Utility-First Approach

Instead of writing custom CSS, compose designs using pre-built utility classes:

```html
<!-- Traditional CSS -->
<style>
  .btn {
    background-color: #3b82f6;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
  }
</style>
<button class="btn">Click me</button>

<!-- Tailwind utility-first -->
<button class="bg-blue-500 text-white px-4 py-2 rounded">
  Click me
</button>
```

### Core Utility Categories

#### Layout

- **Display**: `block`, `inline-block`, `flex`, `grid`, `hidden`
- **Position**: `static`, `relative`, `absolute`, `fixed`, `sticky`
- **Flexbox**: `flex-row`, `flex-col`, `justify-center`, `items-center`, `gap-4`
- **Grid**: `grid-cols-3`, `grid-rows-2`, `col-span-2`, `row-span-1`

#### Spacing

- **Padding**: `p-4`, `px-2`, `py-6`, `pt-8`, `pr-3`, `pb-2`, `pl-1`
- **Margin**: `m-4`, `mx-auto`, `my-6`, `-mt-4` (negative margins)
- **Space Between**: `space-x-4`, `space-y-2`

#### Typography

- **Font Family**: `font-sans`, `font-serif`, `font-mono`
- **Font Size**: `text-xs`, `text-sm`, `text-base`, `text-lg`, `text-xl`, `text-2xl`, `text-3xl`
- **Font Weight**: `font-thin`, `font-normal`, `font-medium`, `font-semibold`, `font-bold`
- **Text Color**: `text-gray-900`, `text-blue-500`, `text-red-600`
- **Text Alignment**: `text-left`, `text-center`, `text-right`, `text-justify`
- **Line Height**: `leading-none`, `leading-tight`, `leading-normal`, `leading-relaxed`

#### Colors & Backgrounds

- **Background Color**: `bg-white`, `bg-gray-100`, `bg-blue-500`
- **Background Gradient**: `bg-gradient-to-r from-blue-500 to-purple-600`
- **Opacity**: `opacity-0`, `opacity-50`, `opacity-100`

#### Borders & Shadows

- **Border**: `border`, `border-2`, `border-t`, `border-gray-300`
- **Border Radius**: `rounded`, `rounded-lg`, `