diff --git a/test/recompilation/index.test.ts b/test/recompilation/index.test.ts
new file mode 100644
index 0000000..1c61298
--- /dev/null
+++ b/test/recompilation/index.test.ts
@@ -0,0 +1,59 @@
+import fs from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { expect, test } from '@playwright/test';
+import { createRsbuild } from '@rsbuild/core';
+import { pluginTailwindCSS } from '../../src';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const themePath = join(__dirname, 'src/theme.css');
+
+test('should update styles when theme file changes', async ({ page }) => {
+  // Reset theme file
+  fs.writeFileSync(
+    themePath,
+    `
+    @theme {
+      --color-dynamic: rgb(1, 2, 3);
+    }
+  `,
+  );
+
+  const rsbuild = await createRsbuild({
+    cwd: __dirname,
+    rsbuildConfig: {
+      plugins: [pluginTailwindCSS()],
+    },
+  });
+
+  // First build
+  await rsbuild.build();
+  let result = await rsbuild.preview();
+
+  await page.goto(result.urls[0]);
+  let locator = page.locator('#dynamic');
+  await expect(locator).toHaveCSS('background-color', 'rgb(1, 2, 3)');
+  await result.server.close();
+
+  // Modify theme file
+  fs.writeFileSync(
+    themePath,
+    `
+    @theme {
+      --color-dynamic: rgb(4, 5, 6);
+    }
+  `,
+  );
+
+  // Second build (reusing instance if possible, or creating new one if that's how tests work)
+  // The user asked to "Same createRsbuild instance" if possible.
+  // rsbuild.build() runs the build.
+  // We can run it again.
+  await rsbuild.build();
+  result = await rsbuild.preview(); // New preview server
+
+  await page.goto(result.urls[0]);
+  locator = page.locator('#dynamic');
+  await expect(locator).toHaveCSS('background-color', 'rgb(4, 5, 6)');
+  await result.server.close();
+});
diff --git a/test/recompilation/src/index.css b/test/recompilation/src/index.css
new file mode 100644
index 0000000..098c3e6
--- /dev/null
+++ b/test/recompilation/src/index.css
@@ -0,0 +1,6 @@
+@import "tailwindcss";
+@reference "./theme.css";
+
+.dynamic-bg {
+  @apply bg-dynamic;
+}
diff --git a/test/recompilation/src/index.js b/test/recompilation/src/index.js
new file mode 100644
index 0000000..a24fe7e
--- /dev/null
+++ b/test/recompilation/src/index.js
@@ -0,0 +1,7 @@
+import './index.css';
+
+const div = document.createElement('div');
+div.id = 'dynamic';
+div.className = 'dynamic-bg';
+div.textContent = 'Dynamic';
+document.body.appendChild(div);
diff --git a/test/recompilation/src/theme.css b/test/recompilation/src/theme.css
new file mode 100644
index 0000000..dfc7267
--- /dev/null
+++ b/test/recompilation/src/theme.css
@@ -0,0 +1,3 @@
+@theme {
+  --color-dynamic: rgb(4, 5, 6);
+}