TailwindCSS Patterns

Responsive design, dark mode, common layout recipes, performance.

csstailwindfrontend

# TailwindCSS Patterns

## Responsive (mobile-first)
`sm: 640 / md: 768 / lg: 1024 / xl: 1280 / 2xl: 1536`
`class="w-full md:w-1/2 lg:w-1/3"`

## Dark mode
`tailwind.config.js` -> `darkMode: 'class'`. Toggle `<html class="dark">`.
`class="bg-white text-black dark:bg-neutral-950 dark:text-white"`

## Layout recipes
- Centered container: `max-w-5xl mx-auto px-6`
- Flex row: `flex items-center justify-between gap-4`
- Grid: `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4`
- Sticky header: `sticky top-0 z-10 backdrop-blur`
- Fullscreen: `min-h-screen`

## State variants
`hover:`, `focus:`, `active:`, `disabled:`, `group-hover:`, `peer-checked:`
`focus-visible:ring-2 focus-visible:ring-black`

## Arbitrary values
`class="top-[117px] grid-cols-[1fr_2fr]"`

## Avoid
- Long repeated class strings -> extract to component or use `@apply` in a CSS layer.
- Inline styles where a utility exists.

API: /api/skills/tailwindcss-patterns