tailwindcss: Tailwind just stops working randomly

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.

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

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.

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

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

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 👍🏻

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.