tailwindcss: Tailwind not working properly with laravel mix

What version of Tailwind CSS are you using?

2.1.2

What build tool (or framework if it abstracts the build tool) are you using?

laravel mix 6.0.6

What version of Node.js are you using?

v 15.11.0

What browser are you using?

Chrome / Brave

What operating system are you using?

Windows 10

Reproduction repository

https://github.com/jenishshrestha/wp-tailwind-theme

Describe your issue

  1. The first issue I am facing is whenever I run npm run watch I am getting infinite compilation. Issue is probably in this line in config file: "./*.php", mode: 'jit', is enabled FYI.

  2. After a while tailwind classes stopped working properly. For example some of the base css stopped working like h2 h3 font sizes etc.

  3. If I use a css class, -rotate-90, expected css outcome would be --tw-rotate: -90deg; transform: rotate(-90deg); but instead its only --tw-rotate: -90deg;

I am stucked, cant progress further.

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Comments: 15 (4 by maintainers)

Most upvoted comments

Don’t send me mail please.

On Wed, Jun 30, 2021, 19:30 Jenish Shrestha @.***> wrote:

What version of Tailwind CSS are you using?

2.1.2 What build tool (or framework if it abstracts the build tool) are you using?

laravel mix 6.0.6 What version of Node.js are you using?

v 15.11.0 What browser are you using?

Chrome / Brave What operating system are you using?

Windows 10 Reproduction repository

https://github.com/jenishshrestha/wp-tailwind-theme Describe your issue

The first issue I am facing is whenever I run npm run watch I am getting infinite compilation. Issue is probably in this line in config file: “./*.php”, mode: ‘jit’, is enabled FYI. 2.

After a while tailwind classes stopped working properly. For example some of the base css stopped working like h2 h3 font sizes etc. 3.

If I use a css class, -rotate-90, expected css outcome would be –tw-rotate: -90deg; transform: rotate(-90deg); but instead its only –tw-rotate: -90deg;

I am stucked, cant progress further.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/tailwindlabs/tailwindcss/issues/4833, or unsubscribe https://github.com/notifications/unsubscribe-auth/AQLGT35DRLFDDTFTJIKECY3TVMNYPANCNFSM47SL6L3Q .

Issue still here, you can reopen please

@jenishshrestha For the infinite loop problem see the docs here:

https://tailwindcss.com/docs/just-in-time-mode#styles-rebuild-in-an-infinite-loop

Will try to find time to look into the other stuff soon.

One option you can use in the mean time is to just switch to the Tailwind CLI for compiling your CSS, as we have full control over that and can guarantee it is reliable. Mix is awesome but when you have a lot of things kind of working together sometimes it’s hard to get the integrations just right, so you might be hitting a bug we haven’t found yet.

Then remove that comment.

On Wed, Jun 30, 2021, 19:55 Jenish Shrestha @.***> wrote:

Ok

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/tailwindlabs/tailwindcss/issues/4833#issuecomment-871439660, or unsubscribe https://github.com/notifications/unsubscribe-auth/AQLGT33VVQWYCFC3QM7XRODTVMQVVANCNFSM47SL6L3Q .