Tailwind CSS

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.

Version
4.3
Editions
React, Next.js, Vue, Angular, HTML, Laravel

What the build needs

  • `@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.

Changing it, in one file

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;
}

Sign in to Voilet

Don't have an account?

By continuing you agree to our Terms of Service and Privacy Policy.