create-next-app offers Tailwind 5,202 as a checkbox. Front-End Web Development covers the utility vocabulary; what matters here is the integration, which in Tailwind 4.3.3 is one PostCSS 238,379 plugin and one @import. There is no tailwind.config.js and no content array to keep in sync with your folders.
/* npm i -D tailwindcss@4.3.3 @tailwindcss/postcss@4.3.3, then in postcss.config.mjs:
export default { plugins: { "@tailwindcss/postcss": {} } }; */
@import "tailwindcss";
@theme inline {
--font-sans: var(--font-sans);
--font-serif: var(--font-serif);
}The @theme inline block is the join between Tailwind and next/font: it tells Tailwind that font-sans and font-serif resolve to whatever CSS variables the font loaders defined, so the built stylesheet contains .font-serif{font-family:var(--font-serif)} — one indirection away from the self-hosted files. Because Tailwind produces a stylesheet rather than runtime objects, it needs no client boundary, which is why the Next.js 10,514 documentation names it the default recommendation and reserves CSS Modules for what utilities cannot express. Tailwind 4 uses @property, color-mix() and cascade layers, so it requires Chrome 111 1 +, Safari 16.4 10 + and Firefox 128 555 +; for older browsers, Next.js documents a v3 setup that keeps the JavaScript config file.
Tailwind scans your sources for candidate class names, so a class assembled at runtime is invisible to it. Write complete class names in the source, in a lookup object mapping variants to full class strings.