Generating CSS
First, you will need to install all required node packages.
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
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.
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!
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.
Read more about controlling file sizes with Tailwind and PurgeCSS