Tailwind CSS JIT mode does not process changes (incompatible with base)

[grk]

• I have tried upgrading by running bundle update vite_ruby.
• I have read the troubleshooting section before opening an issue.

Description 📖

vite-ruby dev server seems to be not compatible with tailwindcss jit mode. Adding new classes that should trigger new CSS to be emitted does not do that, resulting in unstyled elements until dev server is restarted. It works fine when building on reload without dev server running.

Reproduction 🐞

https://github.com/grk/rails-vite-tailwind-repro - instructions in readme

Vite Ruby Info

Run bin/rake vite:info and provide the output:

bin/vite present?: true
vite_ruby: 1.2.20
vite_rails: 2.0.13
rails: 6.1.4
node: v16.1.0
npm: 7.11.2
yarn: 1.22.10
pnpm:
ruby: ruby 2.7.2p137 (2020-10-01 revision 5445e04352) [arm64-darwin20]

installed packages:
rails-vite-tailwind-repro@ /Users/grk/code/tmp/rails-vite-tailwind-repro
├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]

Logs 📜

If not providing a reproduction:

Output

Run DEBUG=vite-plugin-ruby:* bin/vite dev or DEBUG=vite-plugin-ruby:* bin/vite build and provide the output:

Screenshots 📷

Provide console or browser screenshots of the problem.

[ElMassimo]

A fix in Vite has been merged, and should be released in 2.5.1.

---

Hi Grzesiek, thanks for reporting.

Since files are being scanned correctly during startup, it's likely to be a bug in the watcher or the dependencies that Tailwind sets up in JIT mode.

Notice how Vite.js does not include an update for index.css, only the component is invalidated:

When the watcher detects changes as expected, that same message would include an update for index.css, which is the file where the Tailwind CSS styles are injected.

---

Since the problem does not occur within the gem or vite-plugin-ruby, I'm afraid I don't have a way to resolve this bug report.

JIT mode is experimental, I'd recommend that you ask for help in a Tailwind forum, or report the bug in the Tailwind tracker.

[ElMassimo]

In the meantime, an alternative to Tailwind JIT that works nicely with Vite.js is Windi CSS.

[grk]

I tried the exact same setup with "plain vite" and it works without any issues - https://github.com/grk/vite-tailwind-repro. It seems like vite-plugin-ruby is what makes the setup different.

Do you have any suggestions for next steps for debugging this?

[ElMassimo]

@grk It's probably related with the use of base, which might affect some internals in how paths are resolved in a way that either Vite.js or the JIT mode do not account for.

Try the following:

diff --git a/vite.config.ts b/vite.config.ts
index 6dc9529..adfe2c2 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,7 +3,13 @@ import Vue from '@vitejs/plugin-vue'
 import RubyPlugin from 'vite-plugin-ruby'
 
 export default defineConfig({
+  base: '/vite-dev/',
+  root: `${__dirname}/app/javascript/entrypoints`,
+  server: {
+    fs: { allow: [__dirname] },
+    port: 3036,
+  },
   plugins: [
-    Vue(), RubyPlugin(),
+    Vue(),
   ],
 })

No vite-plugin-ruby, still scans correctly in development and displays the proper color, but Tailwind doesn't detect file changes.

Now, let's remove base:

diff --git a/config/vite.json b/config/vite.json
index 6e27b69..2f20746 100644
--- a/config/vite.json
+++ b/config/vite.json
@@ -5,7 +5,7 @@
   },
   "development": {
     "autoBuild": true,
-    "publicOutputDir": "vite-dev",
+    "publicOutputDir": ".",
     "port": 3036
   },
   "test": {
diff --git a/vite.config.ts b/vite.config.ts
index 6dc9529..1f6ebab 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,7 +3,12 @@ import Vue from '@vitejs/plugin-vue'
 import RubyPlugin from 'vite-plugin-ruby'
 
 export default defineConfig({
+  root: `${__dirname}/app/javascript/entrypoints`,
+  server: {
+    fs: { allow: [__dirname] },
+    port: 3036,
+  },
   plugins: [
-    Vue(), RubyPlugin(),
+    Vue(),
   ],
 })

Now that there's no base, Tailwind detects changes as expected. Unfortunately, "publicOutputDir": "." is not a valid configuration, so it's not possible to use it as a workaround.

So it's very likely that the problem occurs because Vite, Post CSS, or Tailwind, are not accounting for the base option.

[ElMassimo]

@grk It seems that the intuition above might be correct. See this issue in Tailwind CSS: tailwindlabs/tailwindcss#4978 (comment)

[ElMassimo]

@grk As a temporary workaround, you could downgrade vite to 2.4.2, it seems like the problem with base was introduced in Vite 2.4.3.

[grk]

Downgrading to 2.4.2 helped, thank you!