tailwind-patternslisted

# Tailwind patterns Default assumption in this dotfiles project: Tailwind v4 with CSS-first config. If the project has a `tailwind.config.js` it is v3 and the v3 section applies; otherwise v4. ## v4 vs v3 at a glance - v4 setup: a single `@import "tailwindcss"` in the main CSS file. No `@tailwind base / components / utilities` directives. - v4 config: lives in CSS via the `@theme` directive. No `tailwind.config.js`. Theme tokens become CSS custom properties automatically. - v4 content detection: automatic. The compiler scans the project for class names; you do not configure `content` paths. - v4 plugins: still work, but most v3 plugins (typography, forms, container queries) are now built in. Check before installing. - v4 build: ~5x faster. The Oxide engine replaces PostCSS for the core compile step. ## Setting up v4 correctly ```css /* app/globals.css or equivalent */ @import "tailwindcss"; @theme { --color-brand: oklch(0.7 0.15 250); --font-display: "Inter", sans-serif; --spacing-page: 4rem; --breakpoint-3xl: 1920px; } ``` - Theme keys follow the pattern `--<namespace>-<name>`. Namespaces: `color`, `font`, `text`, `spacing`, `breakpoint`, `radius`, `shadow`, `animate`, etc. - Defining a key generates the corresponding utility (`text-brand`, `font-display`, `p-page`, `3xl:`). - Use `oklch()` for new colors; v4's default palette is OKLCH-based for better wide-gamut support. ## v3 patterns to avoid in v4 - `tailwind.config.js`: do not create one in a v4 project