# Code Reference — Tailwind

_12 pages_

---
# Tailwind (/docs/tailwind)



# Tailwind [#tailwind]

Utility-first CSS.

Browse the sidebar for every cheat sheet in this section.

## Sections [#sections]

*All notes are listed in the sidebar.*


---

# Colors (/docs/tailwind/colors)



# Colors [#colors]

*Tailwind · Reference cheat sheet*

***

## 📋 Overview [#-overview]

Tailwind ships a palette of named colors with numeric shades. Apply via `text-*`, `bg-*`, `border-*`, `ring-*`, `fill-*`, and `stroke-*`.

## 🔧 Core concepts [#-core-concepts]

| Prefix                       | Applies to       |
| ---------------------------- | ---------------- |
| `text-\{color\}-\{shade\}`   | color            |
| `bg-\{color\}-\{shade\}`     | background-color |
| `border-\{color\}-\{shade\}` | border-color     |
| `ring-\{color\}-\{shade\}`   | box-shadow ring  |
| `from-*` / `via-*` / `to-*`  | gradients        |

| Shade                             | Typical use                 |
| --------------------------------- | --------------------------- |
| 50–200                            | Backgrounds, subtle borders |
| 400–600                           | Accents, interactive        |
| 700–950                           | Text, strong emphasis       |
| `white` / `black` / `transparent` | Special keywords            |

## 💡 Examples [#-examples]

**Palette usage:**

```html
<div class="bg-sky-50 text-sky-950 border border-sky-200">Info</div>
<button class="bg-emerald-600 hover:bg-emerald-500 text-white">Go</button>
```

**Gradient:**

```html
<div class="bg-gradient-to-r from-orange-400 to-rose-500"></div>
```

**Opacity modifier:**

```html
<div class="bg-black/50 text-white">Overlay</div>
```

## ⚠️ Pitfalls [#️-pitfalls]

* Low-contrast text fails a11y — check `text-*` on `bg-*` pairs.
* Custom brand colors belong in `theme.extend.colors`, not one-off arbitrary hex everywhere.
* Printing / forced-colors modes may need extra CSS beyond utilities.

## 🔗 Related [#-related]

* [dark\_mode.md](/docs/tailwind/dark-mode)
* [typography.md](/docs/tailwind/typography)
* [custom\_config.md](/docs/tailwind/custom-config)
* [utility\_classes.md](/docs/tailwind/utility-classes)


---

# Custom Config (/docs/tailwind/custom-config)



# Custom Config [#custom-config]

*Tailwind · Reference cheat sheet*

***

## 📋 Overview [#-overview]

Customize Tailwind via `theme.extend` (preserve defaults) or replace theme keys. Content paths, plugins, and dark mode strategy live in the same config (v3) or CSS-first config (v4).

## 🔧 Core concepts [#-core-concepts]

| Key               | Purpose                             |
| ----------------- | ----------------------------------- |
| `content`         | Files to scan for classes           |
| `theme.extend`    | Add tokens without wiping defaults  |
| `theme` (replace) | Override entire scales              |
| `plugins`         | Register official/community plugins |
| `prefix`          | Namespace classes (`tw-`)           |
| `corePlugins`     | Disable built-ins                   |

| Extend examples      | Adds               |
| -------------------- | ------------------ |
| `colors.brand`       | Brand palette      |
| `fontFamily.display` | Custom font stack  |
| `spacing['18']`      | Extra spacing step |
| `screens.3xl`        | Extra breakpoint   |

## 💡 Examples [#-examples]

**Extend theme (v3):**

```js
export default {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        brand: { DEFAULT: "#0F766E", light: "#5EEAD4" },
      },
      fontFamily: {
        display: ["\"Fraunces\"", "serif"],
      },
    },
  },
};
```

**Use tokens:**

```html
<h1 class="font-display text-brand">Hello</h1>
```

**Prefix:**

```js
export default { prefix: "tw-", content: ["./src/**/*.{html,js}"] };
// classes become tw-flex, tw-p-4, ...
```

## ⚠️ Pitfalls [#️-pitfalls]

* Replacing `theme.colors` entirely removes the default palette — use `extend`.
* Wrong `content` globs silently drop utilities.
* Arbitrary values don't need config — but shared brand tokens should be themed.

## 🔗 Related [#-related]

* [plugins.md](/docs/tailwind/plugins)
* [getting\_started.md](/docs/tailwind/getting-started)
* [colors.md](/docs/tailwind/colors)
* [responsive.md](/docs/tailwind/responsive)


---

# Dark Mode (/docs/tailwind/dark-mode)



# Dark Mode [#dark-mode]

*Tailwind · Reference cheat sheet*

***

## 📋 Overview [#-overview]

Dark mode uses the `dark:` variant. Strategy is either media-based (`prefers-color-scheme`) or class-based (`class="dark"` on a root element).

## 🔧 Core concepts [#-core-concepts]

| Strategy        | Config                 | Toggle                        |
| --------------- | ---------------------- | ----------------------------- |
| `media`         | default in many setups | OS preference                 |
| `class`         | `darkMode: 'class'`    | Add/remove `dark` on `<html>` |
| `selector` (v4) | custom selector        | Framework-specific            |

| Pair     | Example                                |
| -------- | -------------------------------------- |
| Surfaces | `bg-white dark:bg-zinc-900`            |
| Text     | `text-zinc-900 dark:text-zinc-100`     |
| Borders  | `border-zinc-200 dark:border-zinc-700` |

## 💡 Examples [#-examples]

**Class strategy config (v3):**

```js
export default {
  darkMode: "class",
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
};
```

**Markup:**

```html
<html class="dark">
  <body class="bg-white text-zinc-900 dark:bg-zinc-950 dark:text-zinc-50">
    ...
  </body>
</html>
```

**Toggle sketch:**

```js
document.documentElement.classList.toggle("dark");
```

## ⚠️ Pitfalls [#️-pitfalls]

* Forgetting to set `darkMode: 'class'` while toggling a class does nothing.
* Flash of wrong theme on first paint — set class early (inline script) before CSS paints.
* Not all colors need inversion; keep brand accents consistent.

## 🔗 Related [#-related]

* [colors.md](/docs/tailwind/colors)
* [custom\_config.md](/docs/tailwind/custom-config)
* [typography.md](/docs/tailwind/typography)
* [getting\_started.md](/docs/tailwind/getting-started)


---

# Getting Started with Tailwind CSS (/docs/tailwind/getting-started)



# Getting Started with Tailwind CSS [#getting-started-with-tailwind-css]

*Tailwind · Reference cheat sheet*

***

## 📋 Overview [#-overview]

Tailwind CSS is a utility-first framework: you compose small classes (`flex`, `p-4`, `text-sm`) in markup instead of writing bespoke CSS for every component.

## 🔧 Core concepts [#-core-concepts]

| Idea                    | Meaning                                      |
| ----------------------- | -------------------------------------------- |
| Utility class           | Single-purpose class (`mt-4`, `bg-blue-600`) |
| Design tokens           | Spacing, colors, fonts from the theme        |
| Variants                | Prefixes like `hover:`, `md:`, `dark:`       |
| Content scan            | Tailwind finds class names in template files |
| `@tailwind` / `@import` | CSS entry depending on v3 vs v4              |

**Install (v3 typical):**

```shellscript
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

## 💡 Examples [#-examples]

**HTML utilities:**

```html
<button class="rounded-lg bg-slate-900 px-4 py-2 text-sm text-white hover:bg-slate-700">
  Save
</button>
```

**`tailwind.config.js` content paths:**

```js
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: { extend: {} },
  plugins: [],
};
```

**CSS entry (v3):**

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

## ⚠️ Pitfalls [#️-pitfalls]

* If classes are built via string concatenation, the scanner may miss them — use complete class names or safelist.
* Missing `content` paths → empty CSS output.
* Mixing Tailwind versions (v3 PostCSS vs v4 Vite plugin) without matching docs causes broken builds.

## 🔗 Related [#-related]

* [utility\_classes.md](/docs/tailwind/utility-classes)
* [responsive.md](/docs/tailwind/responsive)
* [custom\_config.md](/docs/tailwind/custom-config)
* [Comparisons/tailwind\_vs\_css.md](/docs/tailwind/../comparisons/tailwind-vs-css)


---

# Glossary (/docs/tailwind/glossary)



# Glossary [#glossary]

*Tailwind · Reference cheat sheet*

***

## 📋 Overview [#-overview]

Alphabetical glossary of Tailwind CSS utility-first and configuration terms.

## 🔧 Core concepts [#-core-concepts]

| Term               | Definition                                                  |
| ------------------ | ----------------------------------------------------------- |
| Arbitrary value    | Bracket syntax like `w-[14ch]` for one-off CSS values.      |
| Content paths      | Glob list of files Tailwind scans for class names.          |
| Core plugin        | Built-in feature group that can be disabled.                |
| Design token       | Named theme value for spacing, color, font, etc.            |
| JIT                | Just-in-time generation of only used utilities.             |
| Modifier / variant | Prefix such as `hover:`, `md:`, `dark:`.                    |
| Preflight          | Tailwind’s base/reset styles.                               |
| Purge (legacy)     | Old name for removing unused CSS; replaced by content scan. |
| Safelist           | Explicit classes always included in the CSS output.         |
| Theme              | Config object defining design scales.                       |
| Utility            | Single-purpose class mapping to one CSS declaration set.    |
| `@apply`           | Directive to inline utilities inside custom CSS.            |
| `@layer`           | Places custom CSS into base/components/utilities layers.    |

## 💡 Examples [#-examples]

**Variant stack:**

```html
<button class="bg-zinc-900 hover:bg-zinc-700 md:px-6 dark:bg-zinc-100">
  OK
</button>
```

**Safelist sketch:**

```js
export default {
  safelist: ["bg-red-500", "bg-green-500"],
};
```

## ⚠️ Pitfalls [#️-pitfalls]

* Dynamic class construction often breaks scanning — prefer complete strings.
* `@apply` can recreate the specificity fights utilities were meant to avoid.

## 🔗 Related [#-related]

* [getting\_started.md](/docs/tailwind/getting-started)
* [utility\_classes.md](/docs/tailwind/utility-classes)
* [custom\_config.md](/docs/tailwind/custom-config)
* [README.md](/docs/tailwind)


---

# Layout: Flex & Grid (/docs/tailwind/layout-flex-grid)



# Layout: Flex & Grid [#layout-flex--grid]

*Tailwind · Reference cheat sheet*

***

## 📋 Overview [#-overview]

Flexbox and CSS Grid utilities cover most app layouts: toolbars, sidebars, card grids, and centering.

## 🔧 Core concepts [#-core-concepts]

| Flex                         | Grid                         |
| ---------------------------- | ---------------------------- |
| `flex`, `inline-flex`        | `grid`, `inline-grid`        |
| `flex-row` / `flex-col`      | `grid-cols-*`                |
| `items-*` / `justify-*`      | `gap-*`, `col-span-*`        |
| `flex-1`, `grow`, `shrink-0` | `grid-rows-*`, `row-span-*`  |
| `flex-wrap`                  | `auto-rows-*`, `auto-cols-*` |

| Alignment            | Meaning                       |
| -------------------- | ----------------------------- |
| `items-center`       | Cross-axis center (flex)      |
| `justify-between`    | Main-axis space between       |
| `place-items-center` | Grid item centering shorthand |

## 💡 Examples [#-examples]

**Centered hero content:**

```html
<div class="flex min-h-screen items-center justify-center">
  <p>Centered</p>
</div>
```

**Sidebar + main:**

```html
<div class="flex min-h-screen">
  <aside class="w-64 shrink-0 border-r">Sidebar</aside>
  <main class="flex-1 p-6">Main</main>
</div>
```

**Responsive grid:**

```html
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
  <div>1</div><div>2</div><div>3</div><div>4</div>
</div>
```

## ⚠️ Pitfalls [#️-pitfalls]

* `flex-1` children can overflow — add `min-w-0` for truncating text in flex rows.
* Mixing heavy nested grids without `gap` becomes brittle — prefer simpler structures.
* Absolute positioning (`absolute inset-0`) escapes flex/grid flow — intentional only.

## 🔗 Related [#-related]

* [responsive.md](/docs/tailwind/responsive)
* [spacing\_sizing.md](/docs/tailwind/spacing-sizing)
* [utility\_classes.md](/docs/tailwind/utility-classes)
* [getting\_started.md](/docs/tailwind/getting-started)


---

# Plugins (/docs/tailwind/plugins)



# Plugins [#plugins]

*Tailwind · Reference cheat sheet*

***

## 📋 Overview [#-overview]

Plugins add new utilities, components, or variants. Official plugins cover typography, forms, and aspect-ratio (some now built-in depending on version).

## 🔧 Core concepts [#-core-concepts]

| Plugin                           | Adds                                  |
| -------------------------------- | ------------------------------------- |
| `@tailwindcss/typography`        | `prose` styles for rich text          |
| `@tailwindcss/forms`             | Sensible form element base styles     |
| `@tailwindcss/container-queries` | `@min-*` / `@max-*` variants (v3 era) |
| `@tailwindcss/aspect-ratio`      | Legacy aspect utilities               |

| API                                                          | Role                       |
| ------------------------------------------------------------ | -------------------------- |
| `plugin(function(\{ addUtilities, addComponents, theme \}))` | Author plugins             |
| `addVariant`                                                 | Custom variants            |
| `matchUtilities`                                             | Dynamic utility generation |

## 💡 Examples [#-examples]

**Register plugins (v3):**

```js
import typography from "@tailwindcss/typography";
import forms from "@tailwindcss/forms";

export default {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  plugins: [typography, forms],
};
```

**Prose article:**

```html
<article class="prose dark:prose-invert max-w-none">
  <h1>Doc title</h1>
  <p>Markdown-rendered content…</p>
</article>
```

**Tiny custom utility plugin:**

```js
import plugin from "tailwindcss/plugin";

export default {
  plugins: [
    plugin(({ addUtilities }) => {
      addUtilities({
        ".content-auto": { "content-visibility": "auto" },
      });
    }),
  ],
};
```

## ⚠️ Pitfalls [#️-pitfalls]

* Duplicate functionality between Tailwind core and old plugins wastes CSS.
* Plugin order can matter when multiple plugins define the same utility.
* Always install matching plugin majors for your Tailwind major.

## 🔗 Related [#-related]

* [custom\_config.md](/docs/tailwind/custom-config)
* [typography.md](/docs/tailwind/typography)
* [getting\_started.md](/docs/tailwind/getting-started)
* [dark\_mode.md](/docs/tailwind/dark-mode)


---

# Responsive Design (/docs/tailwind/responsive)



# Responsive Design [#responsive-design]

*Tailwind · Reference cheat sheet*

***

## 📋 Overview [#-overview]

Tailwind uses mobile-first breakpoint variants. Unprefixed utilities apply from `0` up; `md:` and larger override at that minimum width.

## 🔧 Core concepts [#-core-concepts]

| Variant (default) | Min width |
| ----------------- | --------- |
| `sm:`             | 640px     |
| `md:`             | 768px     |
| `lg:`             | 1024px    |
| `xl:`             | 1280px    |
| `2xl:`            | 1536px    |

| Pattern                      | Meaning                      |
| ---------------------------- | ---------------------------- |
| `w-full md:w-1/2`            | Full on mobile, half from md |
| `hidden md:block`            | Show starting at md          |
| `grid-cols-1 lg:grid-cols-3` | Stack then 3 columns         |
| `max-md:`                    | Only below md (v3.2+)        |

## 💡 Examples [#-examples]

**Stack → row:**

```html
<div class="flex flex-col gap-4 md:flex-row md:items-center">
  <nav class="w-full md:w-64">Nav</nav>
  <main class="flex-1">Content</main>
</div>
```

**Responsive type:**

```html
<h1 class="text-2xl md:text-4xl lg:text-5xl font-bold">Headline</h1>
```

**Hide on small screens:**

```html
<aside class="hidden lg:block">Desktop sidebar</aside>
```

## ⚠️ Pitfalls [#️-pitfalls]

* Thinking desktop-first and writing `md:` as “mobile only” — it's min-width.
* Custom breakpoints must be extended in theme config to stay consistent.
* Container queries use `@min-*` / `@max-*` variants when enabled — different from viewport breakpoints.

## 🔗 Related [#-related]

* [layout\_flex\_grid.md](/docs/tailwind/layout-flex-grid)
* [utility\_classes.md](/docs/tailwind/utility-classes)
* [custom\_config.md](/docs/tailwind/custom-config)
* [dark\_mode.md](/docs/tailwind/dark-mode)


---

# Spacing & Sizing (/docs/tailwind/spacing-sizing)



# Spacing & Sizing [#spacing--sizing]

*Tailwind · Reference cheat sheet*

***

## 📋 Overview [#-overview]

Spacing and sizing scales are theme tokens (usually 4px units). Prefer the scale for consistency; use arbitrary values when the design demands it.

## 🔧 Core concepts [#-core-concepts]

| Prefix                            | CSS                     |
| --------------------------------- | ----------------------- |
| `p-*` / `px-*` / `py-*` / `pt-*`… | padding                 |
| `m-*` / negative `-m-*`           | margin                  |
| `gap-*`                           | flex/grid gap           |
| `space-x-*` / `space-y-*`         | child margins           |
| `w-*` / `h-*`                     | width / height          |
| `min-*` / `max-*`                 | min/max size            |
| `size-*`                          | width + height together |

| Scale tip        | Example              |
| ---------------- | -------------------- |
| `4` → 1rem       | `p-4`                |
| `0.5` → 0.125rem | `gap-0.5`            |
| `full`           | `100%`               |
| `screen`         | `100vh` (`h-screen`) |

## 💡 Examples [#-examples]

**Padding + gap:**

```html
<section class="p-6">
  <div class="flex gap-3">
    <button class="px-3 py-2">A</button>
    <button class="px-3 py-2">B</button>
  </div>
</section>
```

**Width constraints:**

```html
<div class="mx-auto w-full max-w-3xl px-4">Readable measure</div>
```

**Square icon button:**

```html
<button class="size-10 rounded-full">♪</button>
```

## ⚠️ Pitfalls [#️-pitfalls]

* `space-y-*` + `gap-*` together can double spacing.
* `h-screen` ignores mobile browser chrome — `min-h-dvh` is often better when available.
* Collapsing margins still exist for non-flex block layout — prefer `gap` in flex/grid.

## 🔗 Related [#-related]

* [layout\_flex\_grid.md](/docs/tailwind/layout-flex-grid)
* [utility\_classes.md](/docs/tailwind/utility-classes)
* [custom\_config.md](/docs/tailwind/custom-config)
* [typography.md](/docs/tailwind/typography)


---

# Typography (/docs/tailwind/typography)



# Typography [#typography]

*Tailwind · Reference cheat sheet*

***

## 📋 Overview [#-overview]

Typography utilities control font family, size, weight, line-height, letter-spacing, alignment, and text decoration.

## 🔧 Core concepts [#-core-concepts]

| Utility                                  | Role                              |
| ---------------------------------------- | --------------------------------- |
| `font-sans` / `font-serif` / `font-mono` | Family                            |
| `text-xs` … `text-9xl`                   | Font size (+ default line-height) |
| `font-thin` … `font-black`               | Weight                            |
| `leading-*`                              | Line height                       |
| `tracking-*`                             | Letter spacing                    |
| `text-left` / `center` / `right`         | Alignment                         |
| `truncate` / `line-clamp-*`              | Overflow                          |
| `underline` / `no-underline`             | Decoration                        |

| Prose                     | Notes                              |
| ------------------------- | ---------------------------------- |
| `@tailwindcss/typography` | Beautiful markdown/`prose` classes |
| `prose dark:prose-invert` | Article styling                    |

## 💡 Examples [#-examples]

**Heading + body:**

```html
<h1 class="text-3xl font-bold tracking-tight text-zinc-900">Title</h1>
<p class="mt-2 text-base leading-7 text-zinc-600">Supporting paragraph.</p>
```

**Truncate:**

```html
<p class="max-w-xs truncate">A very long single-line label that will ellipsis</p>
```

**Clamp lines:**

```html
<p class="line-clamp-3">Multi-line preview text…</p>
```

## ⚠️ Pitfalls [#️-pitfalls]

* Default `text-*` sizes include line-height — overriding only size can look uneven.
* System font stacks may not match brand — extend `theme.fontFamily`.
* `truncate` requires overflow hidden + width constraint to take effect.

## 🔗 Related [#-related]

* [colors.md](/docs/tailwind/colors)
* [plugins.md](/docs/tailwind/plugins)
* [spacing\_sizing.md](/docs/tailwind/spacing-sizing)
* [custom\_config.md](/docs/tailwind/custom-config)


---

# Utility Classes (/docs/tailwind/utility-classes)



# Utility Classes [#utility-classes]

*Tailwind · Reference cheat sheet*

***

## 📋 Overview [#-overview]

Utilities map to CSS properties. Compose many utilities on one element; extract components only when repetition hurts readability.

## 🔧 Core concepts [#-core-concepts]

| Category   | Examples                                          |
| ---------- | ------------------------------------------------- |
| Layout     | `block`, `flex`, `grid`, `hidden`                 |
| Spacing    | `p-4`, `px-2`, `mt-6`, `gap-3`                    |
| Sizing     | `w-full`, `h-10`, `max-w-lg`, `min-h-screen`      |
| Typography | `text-sm`, `font-medium`, `leading-6`, `truncate` |
| Color      | `text-red-600`, `bg-zinc-100`, `border-slate-300` |
| Border     | `border`, `rounded-md`, `ring-2`                  |
| Effects    | `shadow`, `opacity-50`, `blur`                    |

| Pattern         | Example                            |
| --------------- | ---------------------------------- |
| State variant   | `hover:bg-blue-600`                |
| Important       | `!flex` (escape hatch)             |
| Arbitrary value | `w-[320px]`, `top-[var(--header)]` |

## 💡 Examples [#-examples]

**Card-ish layout without a “card” abstraction:**

```html
<article class="max-w-md rounded-xl border border-zinc-200 p-6 shadow-sm">
  <h2 class="text-lg font-semibold text-zinc-900">Title</h2>
  <p class="mt-2 text-sm text-zinc-600">Body copy</p>
</article>
```

**Arbitrary property:**

```html
<div class="[mask-image:linear-gradient(black,transparent)]"></div>
```

**Space between children:**

```html
<ul class="space-y-2">
  <li>One</li>
  <li>Two</li>
</ul>
```

## ⚠️ Pitfalls [#️-pitfalls]

* Extremely long `class` attributes — extract a component or `@apply` sparingly.
* Conflicting utilities: later rules in generated CSS win, not necessarily left-to-right in the attribute.
* Inline styles still override utilities depending on specificity.

## 🔗 Related [#-related]

* [spacing\_sizing.md](/docs/tailwind/spacing-sizing)
* [typography.md](/docs/tailwind/typography)
* [colors.md](/docs/tailwind/colors)
* [layout\_flex\_grid.md](/docs/tailwind/layout-flex-grid)