First, you will need to install all required node packages.
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
Generating CSS during development
During development run
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.
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!
The resulting CSS file is extremely large (almost as large as Magento’s default stylesheet) and must not be used in production.
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.