Roberto B.If you want to use the latest version of Tailwind CSS (version 2 released on November 18, 2020) with your Laravel 8 application, you need to:
- install the latest version of Tailwind CSS;
- install the latest version of PostCSS;
- install the latest version of Autoprefixer;
PostCSS8 or POSTCSS7
If you try to install these npm packages on your Laravel application, you could obtain an error about PostCSS compatibility: "PostCSS plugin tailwindcss requires PostCSS 8".
On the Tailwind CSS website you could find a suggestion about installing a "special version" of Tailwind CSS with some backward compatibility with PostCSS7. In some contexts this workaround could help you and it works. But on Laravel 8 application, it could not work and I could have a suggestion for you (I tried commands below, with my Laravel 8 projects).
Install Laravel Mix 6 (BETA)
My suggestion is to use PostCSS8, the latest version of TailwindCSS and, because Laravel uses Laravel Mix, try to use the incoming release of Laravel Mix version 6 (in these days is still in Beta).
So the command is:
npm install tailwindcss@latest postcss@latest autoprefixer@latest laravel-mix@6.0.0-beta.14
packages.json fine tuning
To complete the installation you need to make some fine tuning to your packages.json file.
In packages.json file in the "script" section you need to eliminate the --no-progress option because it is no more available on LaravelMix 6.
So your "production" script could be:
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --config=node_modules/laravel-mix/setup/webpack.config.js"
Feedback are welcome
After these commands, "you are living on the edge" because you are using the latest version of TailwindCSS and you are using a beta version of Laravel Mix.
Let me know your feedbacks in the comment below.
