tailwindcss

Build CSS from input file

$ tailwindcss -i [src/input.css] -o [dist/output.css]

$ tailwindcss -i [src/input.css] -o [dist/output.css] --watch

$ tailwindcss -i [src/input.css] -o [dist/output.css] --minify

$ tailwindcss init

$ tailwindcss init --full

$ npx tailwindcss -i [src/input.css] -o [dist/output.css]

tailwindcss [-i input] [-o output] [--watch] [--minify] [--config path]

Tailwind CSS is a utility-first CSS framework that generates optimized CSS by scanning source files for class usage. The CLI compiles Tailwind's utility classes into standard CSS.
The build process scans template files (HTML, JSX, Vue, etc.) for Tailwind classes, generates only the CSS rules actually used, and outputs a production-ready stylesheet. The --watch flag enables live rebuilding during development.
Input CSS files should contain Tailwind directives like @tailwind base, @tailwind components, and @tailwind utilities. Configuration is customized via tailwind.config.js.

-i file, --input file

Input CSS file to process

Output file for compiled CSS

Watch for changes and rebuild automatically

Minify the output CSS

Path to tailwind.config.js file

Content files to scan for class usage

Display help information

init

Create a tailwind.config.js file

Create configuration with all default values

The CLI requires Node.js. For production builds, always use --minify to reduce file size. Ensure content paths in configuration correctly point to all template files to avoid missing styles.

Tailwind CSS was created by Adam Wathan and first released in November 2017. Version 4 (2024) introduced significant performance improvements with the @tailwindcss/cli package. The framework popularized the utility-first approach to CSS.

postcss(1), sass(1), npm(1)