---
description: Tailwind CSS utility-first styling conventions for AIUI
globs: "**/*.vue,**/*.css,**/*.ts"
alwaysApply: false
---

# Tailwind CSS Styling

## Utility-First
Use Tailwind utilities directly in templates. Extract to component classes only when a pattern repeats 3+ times.

## 4px Spacing Grid
All spacing follows a 4px base grid:
- 1 = 4px, 2 = 8px, 3 = 12px, 4 = 16px, 5 = 20px, 6 = 24px, 8 = 32px, 12 = 48px, 16 = 64px

## Typography Scale
```
text-xs    = 12px  (metadata, timestamps)
text-sm    = 14px  (body text, buttons)
text-base  = 16px  (default body, inputs)
text-lg    = 18px  (subtitles)
text-xl    = 20px  (card titles)
text-2xl   = 24px  (section headings)
text-3xl   = 30px  (page headings)
text-4xl   = 36px  (hero headings)
```

Font weights: `font-normal` (body), `font-medium` (emphasis), `font-semibold` (headings/buttons), `font-bold` (strong emphasis).

## Border Radius
- `rounded-md` (6px) — inputs
- `rounded-lg` (8px) — buttons, standard cards
- `rounded-2xl` (16px) — modern cards, modals
- `rounded-full` — pills, avatars

## Shadows
- `shadow-sm` — subtle elevation
- `shadow-md` — standard card
- `shadow-lg` — modal, dropdown
- `shadow-xl` — hero card

## Glass Morphism
For cards over complex backgrounds:
```html
<div class="bg-white/10 backdrop-blur-sm border border-white/10 rounded-2xl">
```
Never use glass morphism on body text containers or form inputs.

## Responsive — Mobile First
Always write base styles for mobile, enhance with breakpoints:
```html
<div class="text-base md:text-lg lg:text-xl p-4 md:p-6 lg:p-8">
```
Breakpoints: `sm` (640px), `md` (768px), `lg` (1024px), `xl` (1280px), `2xl` (1536px).

## Dark Mode
Use CSS custom properties for theme switching. Both Tailwind `dark:` and custom theme classes supported:
```html
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
```

## Gradients for Hierarchy
Use gradients strategically for emphasis, not decoration:
```html
<h2 class="bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">
```

## Hover States
All interactive elements need immediate visual feedback (< 100ms):
```html
<button class="transition-colors duration-200 hover:bg-primary-dark">
```

## Focus States
Always visible focus for accessibility:
```html
<button class="focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2">
```