From a4f60318974e8ae123cfa6b5893dba41955a77ef Mon Sep 17 00:00:00 2001
From: Sribatsha Dash <zen@Sribatshas-MacBook-Air.local>
Date: Tue, 30 Dec 2025 01:42:17 +0530
Subject: [PATCH] fix(vite): resolve tailwind hmr for mdx files

---
 .changeset/fix-tailwind-hmr.md   |  5 +++++
 src/vite/devServer.ts            |  5 ++++-
 src/vite/plugins/tailwind-hmr.ts | 33 ++++++++++++++++++++++++++++++++
 src/vite/vite.config.ts          |  2 ++
 4 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/fix-tailwind-hmr.md
 create mode 100644 src/vite/plugins/tailwind-hmr.ts

diff --git a/.changeset/fix-tailwind-hmr.md b/.changeset/fix-tailwind-hmr.md
new file mode 100644
index 00000000..52ff2eef
--- /dev/null
+++ b/.changeset/fix-tailwind-hmr.md
@@ -0,0 +1,5 @@
+---
+"vocs": patch
+---
+
+Fixed Tailwind HMR not working for MDX files by correcting Vite root handling and adding a custom HMR plugin.
diff --git a/src/vite/devServer.ts b/src/vite/devServer.ts
index 7060834c..72c1a8a0 100644
--- a/src/vite/devServer.ts
+++ b/src/vite/devServer.ts
@@ -19,10 +19,13 @@ export async function createDevServer(params: CreateDevServerParameters = {}) {
   return createServer({
     configFile: resolve(import.meta.dirname, './vite.config.ts'),
     envDir: cwd(),
-    root: import.meta.dirname,
+    root: cwd(),
     server: {
       host: params.host,
       port: params.port,
+      fs: {
+        allow: [process.cwd(), resolve(import.meta.dirname, '../../')],
+      },
     },
     plugins: [dev()],
   })
diff --git a/src/vite/plugins/tailwind-hmr.ts b/src/vite/plugins/tailwind-hmr.ts
new file mode 100644
index 00000000..04de25ed
--- /dev/null
+++ b/src/vite/plugins/tailwind-hmr.ts
@@ -0,0 +1,33 @@
+import type { Plugin } from 'vite'
+
+export function tailwindHmr(): Plugin {
+  return {
+    name: 'vocs-tailwind-hmr',
+    configureServer(server) {
+      server.watcher.on('change', async (file) => {
+        if (!file.endsWith('.mdx')) return
+
+        const keys = [...server.moduleGraph.idToModuleMap.keys()]
+        const relationId = keys.find((id) => id.includes('styles.css'))
+
+        if (relationId) {
+          const relationModule = server.moduleGraph.getModuleById(relationId)
+          if (relationModule) {
+            server.moduleGraph.invalidateModule(relationModule)
+            server.ws.send({
+              type: 'update',
+              updates: [
+                {
+                  type: 'js-update',
+                  timestamp: Date.now(),
+                  path: relationModule.url,
+                  acceptedPath: relationModule.url,
+                },
+              ],
+            })
+          }
+        }
+      })
+    },
+  }
+}
diff --git a/src/vite/vite.config.ts b/src/vite/vite.config.ts
index 46a3a42e..c883ac7b 100644
--- a/src/vite/vite.config.ts
+++ b/src/vite/vite.config.ts
@@ -11,6 +11,7 @@ import { mdx } from './plugins/mdx.js'
 import { resolveVocsModules } from './plugins/resolve-vocs-modules.js'
 import { search } from './plugins/search.js'
 import { splitVendorChunkPlugin } from './plugins/splitVendorChunk.js'
+import { tailwindHmr } from './plugins/tailwind-hmr.js'
 import { virtualBlog } from './plugins/virtual-blog.js'
 import { virtualConfig } from './plugins/virtual-config.js'
 import { virtualConsumerComponents } from './plugins/virtual-consumer-components.js'
@@ -57,6 +58,7 @@ export default defineConfig(async () => {
           return `${prefix}${scope}${debugId ? `_${debugId}` : ''}`
         },
       }),
+      tailwindHmr(),
       css(),
       llms(),
       mdx(),