Tailwind just stops working randomly

[MariuzM]

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?

Next.js

What version of Node.js are you using?

14.16.1

What browser are you using?

Chrome

What operating system are you using?

Mac

Reproduction repository

N/A

Describe your issue

From time to time tailwing just stop working, so adding a new class or changing it does not take any effect solution i found is to nuke .lock and node_modules and do yarn install again

Has any one else experienced this?

Also i have mode: 'jit', enabled

[brunottonurb]

For me it stops working randomly too, but it's enough to restart webpack-dev-server to get it to work.
Using a webpack+babel+react+postcss+tailwind setup.

[MariuzM]

I'm sure I've tried restarted dev server but will give this another go

[adamwathan]

Try setting the TAILWIND_DISABLE_TOUCH=true environment variable in your script, it'll use an alternate dependency tracking engine that is a tiny bit slower but less prone to issues like race conditions and stuff like that. We're hoping to make it the default for v2.2+, but we had to make PRs to all of the popular build tools to be able to properly support it as it depends on a brand new feature we needed to get added to PostCSS.

Make sure you're on the latest version of postcss-loader in your Next project for it to work properly 👍🏻

[YannHulot]

I am experiencing the same issue with NextJs and Jit mode on. I tried restarting the dev server but that usually does not fix it.

[MariuzM]

Even with TAILWIND_DISABLE_TOUCH=true i still have the issue, o have to nuke both lock files and node_modules for it to work again. Using Next.js

[MariuzM]

Done the recent update and also getting issues, for example added rounded-xl to another component worked, and when i wanted to change to rounded-md it just removed roundness all together, so again had to nuke lock and node_modules then it started working.

I have these set in babel

  "presets": [
    [
      "next/babel",
      {
        "preset-env": { "targets": { "chrome": 76, "node": 11 } },
        "transform-runtime": { "corejs": false },
        "styled-jsx": {},
        "class-properties": {},
        "preset-react": {}
      }
    ]
  ],

But that should not affect it i guess, never had issues with Chakra UI or Emotion

[TaycanRS]

Same, using Next.js and JIT mode. Thought I was going crazy for a second.

[bradlc]

Hey @MariuzM @brunottonurb @YannHulot @TaycanRS

I have tried to reproduce this in a Next.js project but I was unable to. Without a reproduction it is going to be really tricky to track down the issue. If anyone is able to share a project where this is happening (even if it's intermittent) that would be amazing, either as a public repository or an invitation to a private one 👍

[TaycanRS]

Hey @bradlc

As MariuzM commented, adding a new class or changing it does not take any effect.
Important to note, it doesn't happen with all classes, this following example does not want to reflect space-x-4 from the ordered list.

For testing purposes, I added the breadcrumbs simple with chevrons from the tailwindui site:
https://tailwindui.com/components/application-ui/navigation/breadcrumbs#component-7dc6ffff20237868ddf0e7d21cf17cf1

This is how it shows on localhost:

vs how it should look:

On my application, it is not respecting (-mb-4) to position between header section and main content, as well as (no-underline border-b-4 border-brand) to reflect the yellow underline.

Working version on plain HTML

[adamwathan]

@TaycanRS can you please create a GitHub repo that is set up the way your project is set up so we have something to test? That's what we mean by reproduction 🙏 If we can't make the problem happen on our own computers we have no way to know how to fix it. 100% believe that it's happening but we have tried to reproduce it and we can't, so we need a sample project where it has happened for someone so we can look at every possible cause.

[TaycanRS]

@adamwathan @bradlc
Thank you both for being active and looking into the issue 🙌

Latest update:

• This didn't work for me, perhaps I'm not doing it correctly: TAILWIND_DISABLE_TOUCH=true
• I can't replicate the issue. I cloned my project from GitHub repo and installed next/tailwind and it works on the new folder. Old folder is still faulty so I can try other suggestions.
• Also note that my previous project was a fresh install from a couple of days ago, so there is something that caused JIT to error.
• OP has a mac, I'm using ChromeOS

[adamwathan]

Going to close this since no one has provided a reproduction — I really want to fix this but we need a repo to play with to figure it out. Hoping by closing this that the next person who has this issue will open a new issue and include a reproduction (even if it is super intermittent). Leaving it open just attracts a lot of "+1" style comments that unfortunately don't get us any closer to a solution.

Both @bradlc and @RobinMalfait have spent several hours independently trying to reproduce this issue but haven't been able to get it to happen (at least not when using TAILWIND_DISABLE_TOUCH=true so there must be some other missing piece of the puzzle and we'll need a project that is affected by this issue to see what we're doing differently.

If you find this issue and are having the same problem, please open a new issue and include a repository that demonstrates the issue and we will 100% work to fix it.

[TimMTech]

Next.js never fails to surprise me with its absolute shit instability. PLEASE USE SOMETHING ELSE. ANYTHING BESIDES NEXT.JS. You will thank me later.

[xNOVA2]

this issue still not fix, facing same problem with nextjs try everything :(

[abelbeak]

This occurs when NextJS uses css libraries that require post build, such as existing CSS (global.css) and tailwindcss.

My symptom was that some parts were not randomly applied when using TailwindCSS's custom color, custom width, etc., and it was resolved when the same value was applied in the parent node.

Save changes such as global.css. This situation occurred when Hot Reload was performed.

I couldn't find the exact cause, but I found in tailwind.config.js

module.exports = {
   content: [
     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/views/**/*.{js,ts,jsx,tsx,mdx}",
   ],
}

I solved it by adding the file path to

[alexyoung23j]

@abelbeak bro you can't leave me hanging like that!

[TaycanRS]

@alexyoung23j what do you mean, he did provide a solution, adding the paths in tailwind.config.js solved the issue. You can also do what MariuzM suggested, which is to delete node_modules and restart. This solves the problem as well.

[gatignoly]

This occurs when NextJS uses css libraries that require post build, such as existing CSS (global.css) and tailwindcss.

My symptom was that some parts were not randomly applied when using TailwindCSS's custom color, custom width, etc., and it was resolved when the same value was applied in the parent node.

Save changes such as global.css. This situation occurred when Hot Reload was performed.

I couldn't find the exact cause, but I found in tailwind.config.js

This solution worked for me !!
Thanks a lot @abelbeak

[yola-0316]

Save changes such as global.css. This situation occurred when Hot Reload was performed.

When I trigger save for global.css, it works again!!
My env is Next.js 13, setup tailwindcss follow official guide.

[rahulthomasdev]

Had the same issue, checked the tailwind.config.json. Actually the components folder path was in the root. Including the path "./components//*.{js,ts,jsx,tsx,mdx}" in addition to "./src/components//*.{js,ts,jsx,tsx,mdx}" worked for me.

[Developer-Nasim]

use JIT mode then automatically will fix

[kishoreGleniseOfficial]

In my case, I changed my folder set up, moved some folders to the root, and hence in my project the tailwind stopped suddenly. Then I added the below in tailwind config
content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"] Now it works fine as usual. Hope it helps for someone.