DEV Community

Cover image for How to install Tailwind CSS 2 with Laravel 8
Roberto B.
Roberto B.

Posted on

How to install Tailwind CSS 2 with Laravel 8

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
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
sluxzer profile image
sluxzer

Hey there

trying to run without laravel-mix 6:

npm install tailwindcss@latest postcss@latest autoprefixer@latest
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

my machine:

laravel 8.15.0 with jetsream inertia (vue.js)
Enter fullscreen mode Exit fullscreen mode

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

Thanks

Collapse
 
robertobutti profile image
Roberto B.

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

Collapse
 
ifkas profile image
Ivo Culic

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 :)

Collapse
 
the_olusolar profile image
Solar

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

Collapse
 
the_olusolar profile image
Solar • 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

Collapse
 
robertobutti profile image
Roberto B.

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).

Collapse
 
sluxzer profile image
sluxzer

hey there

is this means tailwindcss 2 & vue.js not compatible yet?

Collapse
 
jsxsudan profile image
Sudan Ghimire

Worked perfectly for me !! Thank you so much

Collapse
 
faysalhaque profile image
Faysal Ul Haque

yeah works fine. thanks for sharing.

Collapse
 
felixdorn profile image
Félix Dorn

TYSM. Was almost running out of things to break. This upgrade was reallly painful.