diff --git a/packages/tailwindcss/src/design-system.ts b/packages/tailwindcss/src/design-system.ts
index 71d506938693..7786790f6c24 100644
--- a/packages/tailwindcss/src/design-system.ts
+++ b/packages/tailwindcss/src/design-system.ts
@@ -75,6 +75,8 @@ export function buildDesignSystem(
   let variants = createVariants(theme)
 
   let parsedVariants = new DefaultMap((variant) => parseVariant(variant, designSystem))
+  let cachedVariantOrder: Map<Variant, number> | null = null
+  let cachedVariantOrderSize = -1
   let parsedCandidates = new DefaultMap((candidate) =>
     Array.from(parseCandidate(candidate, designSystem)),
   )
@@ -188,6 +190,11 @@ export function buildDesignSystem(
     },
 
     getVariantOrder() {
+      // parsedVariants only grows, so the cache should be reset only when the size changes
+      if (cachedVariantOrder !== null && cachedVariantOrderSize === parsedVariants.size) {
+        return cachedVariantOrder
+      }
+
       let variants = Array.from(parsedVariants.values())
       variants.sort((a, z) => this.variants.compare(a, z))
 
@@ -209,6 +216,9 @@ export function buildDesignSystem(
         prevVariant = variant
       }
 
+      cachedVariantOrder = order
+      cachedVariantOrderSize = parsedVariants.size
+
       return order
     },