@tailwindcss/cli

What is @tailwindcss/cli?

@tailwindcss/cli is a command-line interface tool for Tailwind CSS, a utility-first CSS framework. It allows developers to compile Tailwind CSS from source, watch for changes, and optimize the output for production.

What are @tailwindcss/cli's main functionalities?

Compile Tailwind CSS

This command compiles the Tailwind CSS from the source file 'styles.css' and outputs the compiled CSS to 'output.css'. It is useful for generating the CSS needed for a project using Tailwind's utility classes.

npx tailwindcss build styles.css -o output.css

Watch for Changes

This command watches for changes in the source CSS file and automatically recompiles the Tailwind CSS whenever a change is detected. This is useful during development to ensure that the latest styles are always applied.

npx tailwindcss build styles.css -o output.css --watch

Optimize for Production

This command compiles and minifies the Tailwind CSS for production use. It reduces the file size by removing unnecessary whitespace and comments, making it more efficient for deployment.

npx tailwindcss build styles.css -o output.css --minify

Other packages similar to @tailwindcss/cli

postcss-cli

postcss-cli is a command-line tool for processing CSS with PostCSS plugins. It can be used to compile Tailwind CSS by integrating the Tailwind CSS PostCSS plugin. Compared to @tailwindcss/cli, postcss-cli offers more flexibility as it can be used with a variety of PostCSS plugins, not just Tailwind CSS.

gulp

Gulp is a toolkit for automating tasks in the development workflow. It can be configured to compile Tailwind CSS using the Tailwind CSS PostCSS plugin. While @tailwindcss/cli is specifically designed for Tailwind CSS, Gulp provides a more general-purpose task automation solution that can handle a wide range of tasks beyond CSS compilation.

webpack

Webpack is a module bundler that can be configured to process and bundle CSS files, including those using Tailwind CSS. By using the appropriate loaders and plugins, Webpack can compile Tailwind CSS as part of a larger build process. Unlike @tailwindcss/cli, Webpack is a comprehensive tool for managing assets and dependencies in web applications.

README

A utility-first CSS framework for rapidly building custom user interfaces.

Documentation

For full documentation, visit tailwindcss.com.

Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

Discuss Tailwind CSS on GitHub

For chatting with others using the framework:

Join the Tailwind CSS Discord Server

Contributing

If you're interested in contributing to Tailwind CSS, please read our contributing docs before submitting a pull request.