Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

@apply causes vitejs to HMR all files until maximum call stack error.

See original GitHub issue

What version of Tailwind CSS are you using?

3.0.23

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

Vite 2.8.6

What version of Node.js are you using?

v17.5.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

brielov/react-app

Describe your issue

When using tailwindcss + vite, if you use css modules with @apply, when you save any file, it will cause an infinite HMR loop. I’m reporting this here cause this only happens while using tailwind’s apply directive.

TailwindCSS config

module.exports = {
  content: ["index.html", "src/**/*.tsx"],
  theme: {
    extend: {
      screens: {
        standalone: { raw: "(display-mode: standalone)" },
      },
    },
  },
  plugins: [require("@tailwindcss/forms")],
};

PostCSS config

module.exports = {
  plugins: [
    require("tailwindcss/nesting")(require("postcss-nesting")),
    require("tailwindcss"),
    require("autoprefixer"),
  ],
};

https://user-images.githubusercontent.com/42145089/160664310-0d614e9c-7e9b-4ab4-8539-13173b7274ff.mov

Issue Analytics

State:
Created a year ago
Comments:6

Top GitHub Comments

4reactions

thecrypticacecommented, Apr 4, 2022

So I’m not able to reproduce the maximum call stack error but I do see the list of files being much longer than necessary.

I believe this is because in v3.0.23 every file with @apply is registered as changing the “context” that Tailwind CSS uses to build CSS which has the effect of registering more files for updates than necessary. I’m about 95% sure this was fixed by https://github.com/tailwindlabs/tailwindcss/pull/7524 but it’s not in a tagged release yet.

In the meantime you can use our insiders build by running npm install tailwindcss@insiders and it should resolve your problem. Can you give that a try and let us know if that fixes it for you?

2reactions

thecrypticacecommented, Apr 4, 2022

Hahah YES. Glad to hear that fixes it for you! 🎉🎉 Happy to help!

Closing since the issue itself is fixed. I don’t know when we’ll have a tagged release out next but the insiders build is sufficient to use for now. 🚀