test: give each Tailwind render its own cache key, never the clock

src/__tests__/vendor/tailwind/_tailwind.tsx

@@ -36,6 +36,8 @@ const debugDefault =
   typeof process.env.NODE_OPTIONS === "string" &&
   process.env.NODE_OPTIONS.includes("--inspect");
 
+let renderCount = 0;
+
 export async function render(
   component: ReactElement<PropsWithChildren>,
   {
@@ -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() }),
+    // Tailwind caches its compiler per base, so each render takes a base of its own
+    tailwind({ base: `render-${renderCount++}` }),
   ]).process(css, {
     from: __dirname,
   });

src/__tests__/vendor/tailwind/harness.test.tsx

@@ -0,0 +1,16 @@
+import { renderSimple } from "./_tailwind";
+
+afterEach(() => {
+  jest.restoreAllMocks();
+});
+
+test("two renders in one millisecond each compile their own classes", async () => {
+  jest.spyOn(Date, "now").mockReturnValue(0);
+
+  expect(await renderSimple({ className: "left-0" })).toStrictEqual({
+    props: { style: { left: 0 } },
+  });
+  expect(await renderSimple({ className: "left-1" })).toStrictEqual({
+    props: { style: { left: 3.5 } },
+  });
+});