Production build

Tailwind has thousands of utilities, but only the ones found in your files end up in the final CSS. That is why the built file usually weighs just a few kilobytes compressed. Let us see how it works and how to build a project for publishing.

How Tailwind finds classes

At build time Tailwind reads the project files as plain text and looks for anything that resembles a class name. Names that match a utility become CSS; everything else is ignored. Tailwind does not run your code — it just reads the files.

All project files are scanned automatically, except:

• files and folders listed in .gitignore;
• the node_modules folder;
• binary files such as images;
• CSS files and package lock files.

Building with Vite

In a Vite project one command is enough:

npm run build

A finished site appears in the dist folder, and in dist/assets there is a CSS file with a hash in its name, for example index-4f2a9c.css. It contains only the utilities you used, already minified. You can check the result locally with npm run preview.

Building with the CLI

If you use the CLI, add the --minify flag:

npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --minify

The dist/output.css file is what you upload to the server together with your HTML.

Extra sources

If classes live somewhere Tailwind does not look — for example, in a component package inside node_modules — add the path with the @source directive in the main CSS file. The path is relative to that file:

@import "tailwindcss";
 
@source "../node_modules/@my-shop/ui";

Common mistake

Building class names from pieces. Tailwind looks for complete strings in your files, so this code breaks after the build even though it worked with the browser script:

// src/components/StatusBadge.jsx
export default function StatusBadge({ color, children }) {
  return <span className={`bg-${color}-100 text-${color}-800`}>{children}</span>;
}

The source files contain no bg-green-100 or text-green-800 strings, so the final CSS will not have them either. Write names in full:

// src/components/StatusBadge.jsx
const colors = {
  paid: 'bg-green-100 text-green-800',
  pending: 'bg-amber-100 text-amber-800',
};
 
export default function StatusBadge({ status, children }) {
  return <span className={colors[status]}>{children}</span>;
}

All the classes you need now appear in the file in full, and the build will find them.