From 9aa5e32ba5c007a2f09642ad18229857d0c03f34 Mon Sep 17 00:00:00 2001
From: Yevhenii <evgeny.kotyrlo@gmail.com>
Date: Sun, 11 Oct 2026 17:04:24 +0300
Subject: [PATCH] test: give each Tailwind render a compiler of its own

@tailwindcss/postcss reuses one compiler per `from` and `base`, and an
incremental rebuild keeps the first input's `@source inline()` classes.
The harness passed a fixed `from` and `base: Date.now()`, so two renders
that read the same millisecond shared a compiler and the second one
compiled the first one's classes. A per-render counter keys each render
on its own.
---
 src/__tests__/vendor/tailwind/_tailwind.tsx   |  6 ++++--
 .../vendor/tailwind/harness.test.tsx          | 19 +++++++++++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 src/__tests__/vendor/tailwind/harness.test.tsx

diff --git a/src/__tests__/vendor/tailwind/_tailwind.tsx b/src/__tests__/vendor/tailwind/_tailwind.tsx
index 3ba5db5e..4f8cd107 100644
--- a/src/__tests__/vendor/tailwind/_tailwind.tsx
+++ b/src/__tests__/vendor/tailwind/_tailwind.tsx
@@ -13,6 +13,8 @@ import { registerCSS } from "react-native-css/jest";
 
 const testID = "tailwind";
 
+let renderCount = 0;
+
 export type NativewindRenderOptions = RenderOptions & {
   /** Replace the generated CSS*/
   css?: string;
@@ -76,8 +78,8 @@ export async function render(
 
   // Process the TailwindCSS
   const { css: output } = await postcss([
-    /* Tailwind seems to internally cache things, so we need a random value to cache bust */
-    tailwind({ base: Date.now().toString() }),
+    /* The plugin reuses one compiler per `from` and `base`, so every render needs a `base` no other render has */
+    tailwind({ base: `render-${++renderCount}` }),
   ]).process(css, {
     from: __dirname,
   });
diff --git a/src/__tests__/vendor/tailwind/harness.test.tsx b/src/__tests__/vendor/tailwind/harness.test.tsx
new file mode 100644
index 00000000..bf001e71
--- /dev/null
+++ b/src/__tests__/vendor/tailwind/harness.test.tsx
@@ -0,0 +1,19 @@
+import { View } from "react-native-css/components";
+
+import { render } from "./_tailwind";
+
+async function compileClassName(className: string) {
+  const { stylesheet } = await render(<View className={className} />);
+  return stylesheet().s?.map(([name]) => name);
+}
+
+test("renders that read the same millisecond compile their own classes", async () => {
+  const now = jest.spyOn(Date, "now").mockReturnValue(0);
+
+  try {
+    expect(await compileClassName("text-red-500")).toEqual(["text-red-500"]);
+    expect(await compileClassName("text-blue-500")).toEqual(["text-blue-500"]);
+  } finally {
+    now.mockRestore();
+  }
+});