Skip to main content

Tailwind setup

@rtorcato/shadcn-ui ships its components as compiled JS plus a single pre-compiled stylesheet. Importing that stylesheet is the whole setup.

Import the stylesheet​

The package builds src/styles/globals.css into dist/styles.css, exposed as the @rtorcato/shadcn-ui/styles.css subpath. Import it once, at your app root, before any of your own overrides:

import '@rtorcato/shadcn-ui/styles.css'
import './theme.css' // optional — your token overrides (see Theming)

This stylesheet carries the design tokens (CSS variables), the .dark mode block, a Tailwind v4 @theme inline block, and — because it is compiled through Tailwind at publish time — every utility class the components themselves use.

You don't need to scan the package​

Because dist/styles.css is already compiled, there is nothing to add to your Tailwind sources. Classes you pass yourself (<Button className="mt-4" />) live in your own source files and are picked up by your own Tailwind build as usual.

If you do want Tailwind to scan the package anyway — v4 skips node_modules during automatic source detection — register it from your CSS with @source (the path is relative to the stylesheet), not from a JS config:

@import 'tailwindcss';
@source '../node_modules/@rtorcato/shadcn-ui/dist';

Tailwind v4 only​

The package is Tailwind v4 CSS-first: the tokens come from the @theme inline block in dist/styles.css. It ships no JS tailwind.config.ts, and Tailwind v3 is not supported.