[JIT] Using vite does not update the generated CSS

[ghost]

What version of Tailwind CSS are you using?

v2.1.1

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

vite 2.1.5

What version of Node.js are you using?

15.14.0

What browser are you using?

Chromium

What operating system are you using?

Linux, macOS

Reproduction repository

https://github.com/nachtjasmin/vite-tailwind-jit-bug

Describe your issue

When I am running vite in development mode, using vite or yarn dev, the page of my svelte component is correctly refreshed. However, the CSS does not change.

E.g. in the reproduction repo, when changing the background of the div in App.svelte from bg-blue-500 to bg-red-500 does not do anything, reverting this change shows the old css and therefore a blue rectangle. When restarting the build server, the correct css is generated.

Could be related to #3950.

[danon]

I can reproduce the same behaviour with on Mac and Windows, with

"webpack": "^5.28.0",
"node": "v14.5.0"

Additionally, what I see:

• Tailwind JIT doesn't add new classes to the stylesheet, doesn't recompile when I do changes in JXS or styles, but does when I edit main tailwind index.css file.
• There's a racecondition with HMR and JIT. After a change in index.css, I can see that:
  • First webpack reloads the page
  • Then Tailwind JIT updates the styles
  • Styles no longer exist, so browser tries to load missing files
  • Page is rendered without styles
  • To fix: Hit refresh the page (neglectic the usage of HMR)

Sometimes JIT can run faster than Webpack, at which point the page displays normally without reload.

What I think needs to be done is:

• Make editing index.css not cause the racecondition, so that the page is never loaded with missing styles (perhaps can be achieved by not adding bundle hashes to names in development mode? but that would make browser cache it).
• Make editing any styles refresh the tailwind jit, not just the index.css

[kanidjar]

hi, same thing here.

node: v14.15.1
tailwind: 2.1.1
angular: 11.2.7

We need to restart our dev server to see the new classes applied.

[danon]

Im wondering... Could tailwind JIT when working with webpack, somehow make webpack hmr wait with its refresh for JIT compile? Or call it again after finish?

[DoctorDerek]

I can confirm having this bug in NextJS like #4081 intermittently with no way to tell if it's going to occur or not.

It does occur (without any visible error) if I include a Tailwind plugin that is missing or PostCSS configuration file that is invalid. But it also occurs for no apparent reason, and with no obvious output that's different.

JIT not working -- no JIT message, webpack warning:

JIT working -- JIT message, no webpack warning:

These are the same project with npm run dev (next start).

Windows 10 x64, tailwindcss 2.1.1, next 10.1.3 using webpack 5 option
(I updated tailwind to 2.1.2@latest today to monitor the issue further, it could have been fixed)

Here's the list of everything I tried, but nothing seemed to make a difference:

• Remove all Tailwind plugins from tailwind.config.js
• Add variants: ["responsive"] to tailwind.config.js
• Turn it off & turn it back on (this one works! lol)
• Create .env file with TAILWIND_MODE=watch per [JIT] Tailwind does not update classes after saving in NextJS #4081
• Swap npm run dev from next dev to env TAILWIND_MODE=watch NODE_ENV=development next dev

I think @danon is on the right track with there being some type of a race condition. Nice job with that research! 👍

[bradlc]

To address the original issue: it is solved by upgrading vite and @sveltejs/vite-plugin-svelte to their latest versions. I would also recommend removing the custom extractor as Svelte class bindings are handled fine by the JIT engine (although please be aware of #4187). I have opened a pull request on your reproduction repository with these changes.

The other issues mentioned in this thread are not related to vite or svelte, so please open new issues with reproductions if you're having problems, thanks!

[klongmitre]

@bradlc / @adamwathan - I'm having a similar issue with vite build --watch.

~/ ❯❯❯ yarn build-watch                                                                                                                                                                                                            ◼
yarn run v1.22.5
warning package.json: No license field
$ vite build --watch
vite v2.3.4 building for production...

watching for file changes...

build started...
✓ 24 modules transformed.
dist/index.html                  0.54kb
dist/assets/index.06bb62fb.css   3394.85kb / brotli: skipped (large chunk)
dist/assets/index.f70af79e.js    1.08kb / brotli: 0.55kb
dist/assets/vendor.89272c9c.js   64.46kb / brotli: 22.64kb
built in 12138ms.

build started...
✓ 25 modules transformed.
dist/index.html                  0.46kb
dist/assets/index.14cb56db.js    1.06kb / brotli: 0.54kb
dist/assets/vendor.89272c9c.js   64.46kb / brotli: 22.64kb
built in 1774ms.

Changing bg-red-500 to bg-green-500 in App.vue triggered a rebuild, but as you can see the css asset was not regenerated. If I rebuild the proper css is generated. Thoughts?

Update: Interestingly, if I save tailwind.config.js it prompts a build and the css asset file is generated.

tailwindcss: 2.1.2
vite: 2.3.4
@vitejs/plugin-vue: 1.2.2

[klongmitre]

@bradlc - The issue I described above seems to be related to Vite 2.3.4. I just followed the instructions provided here https://tailwindcss.com/docs/guides/vue-3-vite except pinning vite to 2.3.3 and it seems to be working without issue.

[bradlc]

@klongmitre This issue is closed, please open a new one with a reproduction if you're having problems 👍

[nikosgpet]

For anyone it might help, I had the same problem even with the latest versions of svelte, vite and tailwind.

I found that the problem was that I was including tailwind in my __layout.svelte as follows:

<style global lang="postcss">
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>

It turns out that by creating a separate app.css and importing it into my layout solved the problem.

[NoahGav]

For anyone using Nuxt3 you must set the css property in nuxt.config.ts to

css: ["path_to_tailwind.css"]

The tailwind.css file must contain:

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

[m4olivei]

@nikosgpet THANK YOU! I was banging my head against the wall with the same issue until I came across your post. In my case, I am not using SvelteKit, just Svelte for a SPA. I was using the same pattern to pull in Tailwind styles in my root App.svelte component:

<style global lang="postcss">
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>

I moved that to a /src/css/app.css file:

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

Then I imported that from my App.svelte component (I'm also using vite):

import './css/app.css';

And voila, it worked. Also, VSCode started complaining about @tailwind syntax in my app.css file. Installing PostCSS Language Support per syntax support in Tailwind docs did the trick for that!

[smac89]

Another method I've seen is that instead of creating another css file, you can just import tailwindcss/tailwind.css.

It's not mentioned by the tailwind team, so I'm guessing they not fully onboard with using this method (yet).