Styling

Tailwind CSS admin dashboard

Tailwind is the source rather than one of three ports. Every class string in the product is written here first, and the Bootstrap and Bulma editions are generated from it, which is why a class you look up in the documentation means the same thing in all three.

Available in

What the build needs

Built against Tailwind CSS 4.3.

`@tailwindcss/postcss` in your PostCSS config. There is no `tailwind.config.js`: v4 configures in CSS.
An `@source` line pointing at the components, or every class they use is treated as unused and stripped.
Nothing else. No plugin, no preset, no PostCSS chain beyond Tailwind's own.

What the components depend on

Radix UI for the components that need behaviour: dialogs, menus, selects, popovers, tabs. The stylesheet alone draws them; Radix is what makes them keyboard-accessible and focus-managed.

Change the whole product

Every component reads the token layer, so rebranding is this file and not a sweep through the components.

app/globals.css

@import "tailwindcss";
@import "@viliha/vui-react/theme.css";

/* Every component reads these. Change one and the whole product moves. */
:root {
  --button-primary: #7c3aed;
  --radius: 0.5rem;
}

The full token contract is in the theming documentation.