Tailwind UI / Tailwind Plus

# 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
**Visual character:** Inter + indigo + immaculate spacing: the polished house style of the utility-class era, sold as components you paste and own.

---

## Summary

Premium Tailwind components and templates from the Tailwind team.

_Confidence: high. Values are drawn from well-documented public token references._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Indigo 600 | `#4f46e5` | `--color-indigo-600` | Default brand action in templates |
| Gray 900 | `#111827` | `--color-gray-900` | Headings |
| Gray 500 | `#6b7280` | `--color-gray-500` | Secondary text |
| White | `#ffffff` | `--color-white` | Surfaces |
| Gray 50 | `#f9fafb` | `--color-gray-50` | Subtle background |
| Gray 200 | `#e5e7eb` | `--color-gray-200` | Borders |
| Red 600 | `#dc2626` | `--color-red-600` | Errors |
| Green 600 | `#16a34a` | `--color-green-600` | Success |

## Typography

- **Body:** Inter — weights 400, 500, 600, 700, 800 — `Inter, ui-sans-serif, system-ui, sans-serif`
- **Mono:** JetBrains Mono / ui-monospace — weights 400 — `ui-monospace, SFMono-Regular, Menlo, monospace`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| text-5xl | `48px` | `48px` |
| text-3xl | `30px` | `36px` |
| text-xl | `20px` | `28px` |
| text-base | `16px` | `24px` |
| text-sm | `14px` | `20px` |
| text-xs | `12px` | `16px` |

## Spacing

Base unit: `4px`

Scale: `4px` · `8px` · `12px` · `16px` · `24px` · `32px` · `48px` · `64px`

## Corner radius

| Name | Value |
| --- | --- |
| rounded-md | `6px` |
| rounded-lg | `8px` |
| rounded-xl | `12px` |
| rounded-full | `9999px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| shadow-sm | `0 1px 2px 0 rgba(0,0,0,0.05)` |
| shadow-lg | `0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)` |

## Motion

| Name | Value |
| --- | --- |
| default | `150ms cubic-bezier(0.4, 0, 0.2, 1)` |

## Quick start (CSS)

```css
/* Tailwind UI / Tailwind Plus — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://tailwindcss.com/plus */

:root {
  /* Color */
  --color-indigo-600: #4f46e5; /* Default brand action in templates */
  --color-gray-900: #111827; /* Headings */
  --color-gray-500: #6b7280; /* Secondary text */
  --color-white: #ffffff; /* Surfaces */
  --color-gray-50: #f9fafb; /* Subtle background */
  --color-gray-200: #e5e7eb; /* Borders */
  --color-red-600: #dc2626; /* Errors */
  --color-green-600: #16a34a; /* Success */

  /* Typography */
  --font-body: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale */
  --text-text-5xl: 48px /* line-height 48px */;
  --text-text-3xl: 30px /* line-height 36px */;
  --text-text-xl: 20px /* line-height 28px */;
  --text-text-base: 16px /* line-height 24px */;
  --text-text-sm: 14px /* line-height 20px */;
  --text-text-xs: 12px /* line-height 16px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Radius */
  --radius-rounded-md: 6px;
  --radius-rounded-lg: 8px;
  --radius-rounded-xl: 12px;
  --radius-rounded-full: 9999px;

  /* Elevation */
  --shadow-shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);

  /* Motion */
  --motion-default: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
```

## 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.

## 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. Character: Inter + indigo + immaculate spacing: the polished house style of the utility-class era, sold as components you paste and own. Use a primary colour near #4f46e5, the typeface "Inter" (or a close equivalent), corner radius around 6px, a spacing rhythm on a 4px base. 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._