Tailwind CSS

Tailwind ships no components at all, only utility classes generated on demand from what your source files actually use. It is in this directory because a large share of everything else here now assumes it.

At a glance

Install	npm install tailwindcss @tailwindcss/vite
Components	none, this is a styling layer
Config	CSS-first since v4, no JavaScript config file required
Runtime	none, everything compiles to static classes
MCP server	not published
License	MIT

Install

npm install tailwindcss @tailwindcss/vite

Configuration moved into CSS

This is the v4 change that catches people out. There is no tailwind.config.js by default; your design tokens live in the stylesheet and become both theme values and CSS custom properties.

@import "tailwindcss";

@theme {
  --color-brand: #339999;
  --font-display: "Inter", sans-serif;
  --radius-card: 0.75rem;
}

<button class="bg-brand text-white rounded-card px-4 py-2">Save</button>

Read the lock-in honestly

Tailwind's cost is not bundle size, it is coupling. Component kits built on it, and there are many in this directory, stop looking like anything if you remove it. That is a fine trade if you are committing to Tailwind for the life of the project, and an expensive one if you are not sure.

Choose it if

• You want complete visual control with a disciplined scale rather than ad hoc CSS.
• You are adopting a kit that already assumes it, which is most modern ones.

Look elsewhere if

• You want components. This gives you none, by design.
• Your team writes CSS in stylesheets and does not want utility classes in markup. Open Props gives you the token discipline without the class syntax.