Generating CSS

First, you will need to install all required node packages.

cd /path/to/project/app/design/frontend/Acme/default/web/tailwind/
npm install

Node.js version

Please note the minimum required Node.js version for TailwindCSS is available.
At the time of writing the minimum version is node 12.13.0.

Generating CSS for production

You can generate the styles using the command

cd /path/to/project/app/design/frontend/Acme/default/web/tailwind/
npm run build-prod

Generating CSS during development

During development run

cd /path/to/project/app/design/frontend/Acme/default/web/tailwind/
npm run watch

This will start running the tailwind compiler continuously and any css classes added to templates in the purge configuration will be added to the styles.css file immediately.

Development Stylesheet

If you like developing using Chrome Developer Tools with autocompletion for all available Tailwind CSS classes, you can build an unpurged development bundle.

The development bundle will generate a CSS file that contains all Tailwind classes, plus our own styles.

As the name says, it’s meant to be used in development and must not be deployed to staging or production!

cd /path/to/project/app/design/frontend/Acme/default/web/tailwind/
npm run build-dev

The resulting CSS file is extremely large (almost as large as Magento’s default stylesheet) and must not be used in production.

Tip

Using an unpurged development styles build to get autocompletion in the browser dev tools is no longer required. Instead, we recommend using the DevTools for Tailwind browser extension from beyondcode.
It is a commercial product, but it is well worth the price.