Docs · Styling

Tailwind CSS

Tailwind 4 with the Arise UI tokens and no config file.

Styling uses Tailwind CSS 4.3. There is no tailwind.config: the whole theme lives in CSS, in src/app/globals.css, generated from the Arise UI tokens.

Install

With PostCSS (the Next.js default)

create-next-app sets this up when you pick Tailwind. By hand:

$pnpm add -D tailwindcss @tailwindcss/postcss

postcss.config.mjs

export default {  plugins: { "@tailwindcss/postcss": {} },};

With the Turbopack loader (what Arise UI uses)

Tailwind runs as a Turbopack loader instead, so there's no PostCSS config. Use one setup or the other, not both.

$pnpm add -D tailwindcss @tailwindcss/turbopack

next.config.ts

turbopack: {  rules: {    "*.css": { loaders: ["@tailwindcss/turbopack"], as: "*.css" },  },},

Either way, import Tailwind at the top of globals.css and import that file once, in the root layout.

Theme from tokens

@theme turns CSS variables into utilities. Each group starts with initial, which removes Tailwind's defaults, so only Arise UI values exist and an off-palette class like bg-blue-500 simply doesn't work.

globals.css (shortened)

@import "tailwindcss"; /* Dark mode follows <html data-theme="dark">, not the OS setting. */@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *)); @theme {  --color-*: initial;          /* drop Tailwind's palette… */  --color-primary: #4f27c0;    /* …and define only ours: bg-primary, text-primary */  --color-surface: #ffffff;   --radius-*: initial;  --radius-sm: 8px;            /* rounded-sm */   --text-*: initial;  --text-h1: 2.25rem;          /* text-h1 */  --text-h1--line-height: 1.2;} /* Dark values override the same variables, so utilities never change. */:root[data-theme="dark"] {  --color-primary: #a78bfa;  --color-surface: #191620;}

The full file is in the Installation guide, and every token is listed on Foundations.

Utilities you'll use

Token	Utilities
Brand colors	bg-primary, text-primary, bg-secondary-subtle, text-accent, text-on-primary
Surfaces	bg-background, bg-surface, bg-surface-elevated, bg-surface-muted
Text	text-fg, text-fg-secondary, text-fg-muted
Borders	border-border, border-border-strong, border-primary-border
Status	text-success, bg-success-bg, text-warning, text-error, text-info
Type	text-display, text-h1 … text-h4, text-body, text-body-sm, text-caption, text-control
Radius	rounded-xs, rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-full
Shadow	shadow-sm, shadow-md, shadow-lg
Easing	ease-standard, ease-out, ease-in, ease-in-out, ease-overshoot

Spacing is Tailwind's own 4px scale (p-4 is 16px), which matches the Arise UI spacing tokens.

Rules

Use tokens only. A hex color in a class (bg-[#4f27c0]) won't follow dark mode or a custom theme.
Don't add dark: color variants. Tokens already switch with the theme.
Use cn() from @/lib/cn to join conditional classes.
Add one-off helpers with @utility:

globals.css

@utility scrollbar-none {  scrollbar-width: none;  &::-webkit-scrollbar {    display: none;  }}