How to install Tailwind CSS 2 with Laravel 8

#tailwindcss #laravel #npm #tailwindcss2

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.

Resources

Top comments (10)

sluxzer • Dec 2 '20

Hey there

trying to run without laravel-mix 6:

npm install tailwindcss@latest postcss@latest autoprefixer@latest

i got this result:

ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

my machine:

laravel 8.15.0 with jetsream inertia (vue.js)

Is laravel-mix 6 is a must? because you mention it only as "suggestion"

Thanks

Roberto B. • Dec 2 '20

I applied the command i suggested in the posts on projects with: Laravel 8 + Livewire + Tailwindcss2 (Jetstream)

I never tried with Vue.js
I will try it

Ivo Culic • Dec 24 '20

A couple of days ago Laravel Mix 6 was released: laravel-mix.com/docs/6.0/upgrade

Support for PostCSS 8, Vue Loader 16, etc.
Very nice :)

Solar • Nov 24 '20

Works like charm! Wasted a complete day to resolve this. I had to start afresh while following your article. Thanks for all that you do

Solar • Nov 24 '20 • Edited

Now I got the below error while using Vue in the laravel project

Uncaught Error: Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

After so many research and googling, I realized Laravel mix 6 might be the cause
github.com/JeffreyWay/laravel-mix/...

And the steps to fix the issue are listed here
stackoverflow.com/a/64987618/7874532

Roberto B. • Nov 24 '20

Great, thank you for the feedback.
In my case, I had the issue this weekend with Laravel + Livewire + Tailwincss (so , no Vue and VueRouter on my side).