Tailwind Labs · Design system breakdown
Premium Tailwind components and templates from the Tailwind team.
A community-authored style reference in Markdown — colors, type, spacing, and an AI-ready prompt. Unofficial; not affiliated with Tailwind Labs.
Adam Wathan and Steve Schoger launched Tailwind UI in 2019 as a paid product layered on top of Tailwind CSS. In 2024 it merged with Tailwind's other paid offerings into Tailwind Plus — a single subscription covering UI, templates, and Catalyst (the React component framework).
Tailwind Labs maintains it as a paid product. Releases are coordinated with Tailwind CSS major versions. Components ship as raw HTML + Tailwind classes (and React/Vue variants) — copy into your project.
The identity-bearing decisions, rendered. Names and values are illustrative — refer to the system's official tokens reference for the canonical, current set.
indigo-600
Default brand action
gray-900
Default heading text
gray-500
Secondary text
spacing-4
Default spacing step
rounded-md
Default radius
shadow-sm
Subtle elevation
Exactly what ships in tailwind-ui-design.md — plus the same token snapshot restated as CSS custom properties. Copy either, or feed the Markdown straight to an AI coding tool as styling context.
# Tailwind UI / Tailwind Plus — Design Style Reference > **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Tailwind Labs. "Tailwind UI / Tailwind Plus" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values. **System:** Tailwind UI / Tailwind Plus **Owner:** Tailwind Labs **Official documentation:** https://tailwindcss.com/plus --- ## Summary Premium Tailwind components and templates from the Tailwind team. ## Origin Adam Wathan and Steve Schoger launched Tailwind UI in 2019 as a paid product layered on top of Tailwind CSS. In 2024 it merged with Tailwind's other paid offerings into Tailwind Plus — a single subscription covering UI, templates, and Catalyst (the React component framework). ## Governance Tailwind Labs maintains it as a paid product. Releases are coordinated with Tailwind CSS major versions. Components ship as raw HTML + Tailwind classes (and React/Vue variants) — copy into your project. ## Known for - Visual quality — Tailwind UI's marketing components and application UI are widely considered the best in the Tailwind ecosystem. - Catalyst — a React component framework built on Tailwind + Headless UI with a coherent API. - Templates — full marketing sites, landing pages, and admin layouts ready to ship. ## Underrated - The application UI components are heavily inspired by Headless UI under the hood — buying Tailwind UI is partly buying excellent compositions of the open Headless UI primitives. - Tailwind Plus templates ship with thoughtful empty states, error states, and edge cases that most designers skip. ## Watch out for - It's paid. The free Tailwind ecosystem (shadcn/ui, daisyUI, Headless UI) covers most needs without a license. - Templates need adaptation. Lifting a Tailwind UI marketing template into a brand without changes leaves a recognizable Tailwind UI fingerprint. ## Design tokens (illustrative) Representative token values, restated as facts for reference. Names and values are illustrative — refer to the official tokens reference for the canonical, current set. | Token | Value | Role | | --- | --- | --- | | `indigo-600` | `#4f46e5` | Default brand action | | `gray-900` | `#111827` | Default heading text | | `gray-500` | `#6b7280` | Secondary text | | `spacing-4` | `1rem` | Default spacing step | | `rounded-md` | `0.375rem` | Default radius | | `shadow-sm` | `0 1px 2px rgba(0,0,0,0.05)` | Subtle elevation | ## Style brief The identity-bearing decisions, at a glance: - **Brand / primary action:** `#4f46e5` (Default brand action) - **Body text:** `#111827` (Default heading text) - **Corner radius:** `0.375rem` (Default radius) - **Base spacing:** `1rem` (Default spacing step) - **Type:** `#111827` (Default heading text) - **Elevation:** `0 1px 2px rgba(0,0,0,0.05)` (Subtle elevation) ## Components worth studying - **Application Shell** — Sidebar + header + content layouts with a complete responsive story. - **Page Sections (marketing)** — Hero, feature, pricing, FAQ, CTA sections that designers find hard to fault. - **Catalyst components** — React component primitives with a coherent API across Button, Dialog, Form, etc. ## When to choose Tailwind UI / Tailwind Plus Pick Tailwind Plus if your team uses Tailwind, you're shipping marketing surfaces fast, and the visual quality bar matters more than the cost. For agencies and product teams, the ROI is usually clear; for solo developers, free alternatives are competitive. ## Apply this style with an AI tool Paste this into your AI coding assistant as a direction, then iterate: > Design in the spirit of Tailwind UI / Tailwind Plus by Tailwind Labs — Premium Tailwind components and templates from the Tailwind team. Use a primary action colour near #4f46e5, corner radius around 0.375rem, and a restrained, consistent scale. Lean into what it's known for: Visual quality — Tailwind UI's marketing components and application UI are widely considered the best in the Tailwind ecosystem. Match the intent, not the pixels; adapt it to my product rather than cloning it. ## Official references - [Tailwind Plus](https://tailwindcss.com/plus) - [Catalyst](https://tailwindcss.com/plus) - [Headless UI (free)](https://headlessui.com/) --- _Generated by [designsystems.one](https://www.designsystems.one/design-systems/tailwind-ui) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._
If you're evaluating this system
Pick Tailwind Plus if your team uses Tailwind, you're shipping marketing surfaces fast, and the visual quality bar matters more than the cost. For agencies and product teams, the ROI is usually clear; for solo developers, free alternatives are competitive.
