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

[Jes Gonzalez]

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'
],

[Diptesh Choudhuri]

Does not work for me too.

[Jes Gonzalez]

@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

[Phạm Hồng Phúc]

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.

[Jes Gonzalez]

This is a very annoying issue, I can't wait for the release of Nuxt3 with the compatibility of nuxt2 backward according to #169 (comment)

[Juan Carlos Galindo Navarro]

😔

[Nick Wittwer]

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>