{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreihjmdb3ztrwj2fvgnbs5bz3lw3cb3fokbqpxfwk254ritg5jtxj5i",
    "uri": "at://did:plc:5sgu76a53rz3n6unbykmovqy/app.bsky.feed.post/3mlpoj3hgjzz2"
  },
  "description": "Tailwind CSS is a utility-first CSS framework that gives developers a large set of low-level utility classes (flex, pt-4, text-lg, bg-slate-900) which compose directly in HTML / JSX, instead of writing custom CSS rules. Tailwind has become the dominant styling approach for modern React, Vue, and Svelte projects.\n\n\nCore ideas\n\n * Utility-first. Style by composing small primitives; no naming, no CSS file proliferation.\n * Design tokens. Spacing, colour, typography, shadow tokens defined in one con",
  "path": "/engineering-glossary/tailwind-css-utility-framework/",
  "publishedAt": "2026-05-16T00:00:00.000Z",
  "site": "https://sahilkapoor.com",
  "tags": [
    "React",
    "Vue",
    "Svelte",
    "Next.js"
  ],
  "textContent": "**Tailwind CSS** is a utility-first CSS framework that gives developers a large set of low-level utility classes (`flex`, `pt-4`, `text-lg`, `bg-slate-900`) which compose directly in HTML / JSX, instead of writing custom CSS rules. Tailwind has become the dominant styling approach for modern React, Vue, and Svelte projects.\n\n## Core ideas\n\n  * **Utility-first.** Style by composing small primitives; no naming, no CSS file proliferation.\n  * **Design tokens.** Spacing, colour, typography, shadow tokens defined in one config and reused everywhere.\n  * **JIT engine.** Generates only the utilities a project actually uses; bundle stays small even with a huge utility set.\n  * **Responsive prefixes.** `md:`, `lg:`, `dark:`, `hover:`, `focus:` compose for breakpoints, modes, and states.\n  * **Plugins.** First-party plugins for forms, typography, aspect ratio, container queries, line-clamp.\n\n\n\n## Companion ecosystem\n\n  * **shadcn/ui.** Copy-paste React components built on Tailwind and Radix; the dominant new design system pattern.\n  * **Tailwind UI.** Official paid component library from the Tailwind team.\n  * **Headless UI, Radix UI.** Unstyled accessible primitives often paired with Tailwind for styling.\n  * **Tailwind CSS v4.** Reduced configuration, native cascade layers, faster engine.\n\n\n\n🔗\n\n**Related Terms**\nReact, Vue, Svelte, Next.js.",
  "title": "Tailwind CSS",
  "updatedAt": "2026-05-13T19:13:59.589Z"
}