CSS entry
Three import lines, in order, and no configuration file. That is the whole Tailwind setup.
The three lines
app/globals.css
@import "tailwindcss";
@import "topclassui/tokens.css";
@import "topclassui/styles.css";What each line brings
Why there is no tailwind.config.js
Tailwind v4 is configured in CSS. The third import carries the mapping and the @source line, so it can never fall out of step with the components.
The utility names you get
Every token becomes a utility class, with the same names the components use.
Overriding a token
Set the variable after the three imports. Nothing checks the contrast of a value you set yourself.
app/globals.css, version 2
@import "topclassui/styles.css";
:root {
--tc-primary-solid: var(--color-emerald-700);
--tc-primary-on-solid: var(--color-white);
--tc-primary-on-soft: var(--color-emerald-700);
--tc-radius: 0.75rem;
}If the order is wrong
Tailwind’s layer order is set by the first import. Open a layer before it and the components lose to the base resets.
Wrong
@import "topclassui/styles.css";
@import "tailwindcss";
/* the components layer is opened before Tailwind's layer
order statement, so it sinks below base and the resets win */Right
@import "tailwindcss";
@import "topclassui/tokens.css";
@import "topclassui/styles.css";On Vite
On Vite, the same three lines apply, with @tailwindcss/vite in the plugin list instead of PostCSS. The config is on Install the package.