---
description: Tailwind CSS styling conventions
globs: "**/*.tsx"
alwaysApply: false
---

# Tailwind CSS Styling

## Approach
- Utility-first: use Tailwind classes directly in JSX
- Use `clsx` for conditional classes
- Extract repeated patterns into components, not CSS classes
- Dark mode via `dark:` variant (class strategy)

## Layout
- Mobile-first: default styles for mobile, `sm:` / `md:` / `lg:` for larger
- Use `container mx-auto px-4` for page-level wrappers
- Flexbox and Grid via Tailwind utilities

## Colors
- Use semantic color names from theme (primary, secondary, accent)
- Never hardcode hex colors in className

## Example
```tsx
<article className={clsx(
  "rounded-2xl border p-6 transition-shadow hover:shadow-lg",
  "bg-white dark:bg-gray-800",
  isBookmarked && "ring-2 ring-primary-500"
)}>
```