nuxt vite not working with @nuxt/tailwindcss JIT mode:true

[ctwhome]

Version

"nuxt": "^2.15.7"
"@nuxtjs/tailwindcss": "^4.2.0"
"nuxt-vite": "^0.1.1",

Steps to reproduce and problem

When JIT mode is enabled, the changes don't work. It is necessary to restart the server to see the changes.

Just play around changing any CSS class to see that changes are not propagated. 

tailwind.config.js

module.exports{
  mode: 'jit'
}

nuxt.config.js

buildModules: [
  // https://go.nuxtjs.dev/eslint
  '@nuxtjs/eslint-module',
  // https://go.nuxtjs.dev/tailwindcss
  '@nuxtjs/tailwindcss',
  'nuxt-vite'
],

[IgnisDa]

Does not work for me too.

[ctwhome]

@pi0 I am not sure if this is a problem with @nuxt/tailwindcss or with Vite, but when I remove nuxt-vite from build modules, JIT mode works

[phamhongphuc]

It doesn't work for me too. It seems that tailwind is not catching changes in the <template> tag. But changes in the <style> tag along with @apply still work.

[ctwhome]

This is a very annoying issue, I can't wait for the release of Nuxt3 with the compatibility of nuxt2 backward according to https://github.com/nuxt/vite/issues/169#issuecomment-894844622

[oceangravity]

😔

[nwittwer]

I'm also only seeing the issue in the <template> tag, for example, when adding/modifying a div's class from like text-xl to text-2xl (common usage for Tailwind). The styles simply aren't applied, and a hard local server restart is required to see the changes.

As a workaround, as @phamhongphuc mentioned, we can still use the "old-school" way of just creating classes in the HTML and doing all the Tailwind styles in the CSS, since hot-module-reloading still works for <style> definitions.

<template>
<div class="my-component"></div>
</template>

<style>
.my-component {
  @apply text-xl mr-4;
}
</style>