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