could not compile tailwindcss to laravel 8

hi everyone, I am following laravel 8 from scratch series, i tried to install tailwindcss to my application rather than the CDN link. followed the tailwindcss doc, all seemed ok untill i run rpm run watch, the CLI just stopped there and Mix showed 95% completed then never move forward. the app.css in my public fold is with a lots of missing term. and only few tailwindcss function work. anyone else run into the same problem? any pointer to solve it?

, ::before, ::after {
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;

johnDoe220

4 years ago

Level 8

run again mix or https://tailwindcss.com/docs/guides/laravel

leecoding

4 years ago

Level 5

@johnDoe220 tried npm run watch many time, and followed the tailwindcss doc exactly, not working, it seemed i need to wait ages to get the compile done.

johnDoe220

4 years ago

Best Answer

Level 8

Make sure you have the latest versions using:

npm install -D laravel-mix@latest tailwindcss@latest postcss@latest autoprefixer@latest --save-dev

Double-check that your package.json contains the latest script entries to support the latest version of Laravel Mix.

"scripts": {
    "dev": "npm run development",
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "prod": "npm run production",
    "production": "mix --production"
},

And also, remove the postcss.config.js and generate the tailwind.config.js at the same time as postcss.config.js.

npx tailwindcss init -p

Add the following into you /resources/css/app.css.

@tailwind base;
@tailwind components;
@tailwind utilities;

The complete steps would be:

laravel new twtest
cd twtest
npm install -D laravel-mix@latest tailwindcss@latest postcss@latest autoprefixer@latest --save-dev
npx tailwindcss init
# Add the three @tailwind entries into /resources/css/app.css
npm run prod

1 like

leecoding

4 years ago

Level 5

@johnDoe220 mate, thanks a lot, it worked for me. you are awesome!

johnDoe220

4 years ago

Level 8

@leecoding you're welcome, Good luck

johnDoe220

4 years ago

Level 8

or As Digvijay mentioned above the new Mix v6 now supports PostCSS 8. So run:

npm install tailwindcss@latest postcss@latest autoprefixer@latest

After the when you run npm run prod you will still get this message: Additional dependencies must be installed. This will only take a moment.

Running:

npm install browser-sync [email protected] --save-dev --legacy-peer-deps

npm WARN [email protected] requires a peer of webpack@^1 || ^2 || ^3 || ^4 but none is installed. You must install peer dependencies yourself.

Finished. Please run Mix again.

To fix this just add sudo to the front of the npm command it ran:

sudo npm install browser-sync [email protected] --save-dev --legacy-peer-deps

Now run npm run prod and it should work!

Please or to participate in this conversation.