Tailwind JIT - Prepend stackable variant before DEFAULT utilities

tailwindcss+2.2.7.patch

diff --git a/node_modules/tailwindcss/lib/jit/lib/generateRules.js b/node_modules/tailwindcss/lib/jit/lib/generateRules.js
index 9b59423..c2f8660 100644
--- a/node_modules/tailwindcss/lib/jit/lib/generateRules.js
+++ b/node_modules/tailwindcss/lib/jit/lib/generateRules.js


-function applyVariant(variant, matches, context) {
+function applyVariant(variant, matches, hasLibVariant, context) {
   if (matches.length === 0) {
     return matches;
   }

   if (context.variantMap.has(variant)) {
+    let updateSort =
+      hasLibVariant &&
+      !['sm', 'md', 'lg', 'xl', '2xl', 'motion-safe', 'dark', 'motion-reduce'].includes(variant);
     let variantFunctionTuples = context.variantMap.get(variant);
     let result = [];

@@ -177,7 +180,7 @@ function applyVariant(variant, matches, context) {
         }

         let withOffset = [{
-          sort: variantSort | sort,
+          sort: updateSort ? 0n : variantSort | sort,
           layer,
           options
         }, clone.nodes[0]];
@@ -240,6 +243,7 @@ function splitWithSeparator(input, separator) {
 function* resolveMatches(candidate, context) {
   let separator = context.tailwindConfig.separator;
   let [classCandidate, ...variants] = splitWithSeparator(candidate, separator).reverse();
+  let hasLibVariant = variants.includes('lib');
   let important = false;

   if (classCandidate.startsWith('!')) {
@@ -271,7 +275,8 @@ function* resolveMatches(candidate, context) {
             matches.push([{ ...sort,
               options: { ...sort.options,
                 ...options
-              }
+              },
+              sort: hasLibVariant ? 0n : sort.sort,
             }, rule]);
           }
         }
@@ -284,7 +289,8 @@ function* resolveMatches(candidate, context) {
             matches.push([{ ...sort,
               options: { ...sort.options,
                 ...options
-              }
+              },
+              sort: hasLibVariant ? 0n : sort.sort,
             }, rule]);
           }
         }
@@ -297,7 +303,7 @@ function* resolveMatches(candidate, context) {
     }

     for (let variant of variants) {
-      matches = applyVariant(variant, matches, context);
+      matches = applyVariant(variant, matches, hasLibVariant, context);
     }

     for (let match of matches) {
diff --git a/node_modules/tailwindcss/lib/jit/lib/setupContextUtils.js b/node_modules/tailwindcss/lib/jit/lib/setupContextUtils.js
index a7d739d..782f46d 100644
--- a/node_modules/tailwindcss/lib/jit/lib/setupContextUtils.js
+++ b/node_modules/tailwindcss/lib/jit/lib/setupContextUtils.js
@@ -467,10 +467,11 @@ function resolvePlugins(context, tailwindDirectives, root) {
 function registerPlugins(plugins, context) {
   let variantList = [];
   let variantMap = new Map();
+  let reservedBits = 20n;
   let offsets = {
-    base: 0n,
-    components: 0n,
-    utilities: 0n
+    base: (1n << reservedBits) << 0n,
+    components: (1n << reservedBits) << 1n,
+    utilities: (1n << reservedBits) << 2n
   };
   let pluginApi = buildPluginApi(context.tailwindConfig, context, {
     variantList,
@@ -490,7 +491,7 @@ function registerPlugins(plugins, context) {

   let highestOffset = (args => args.reduce((m, e) => e > m ? e : m))([offsets.base, offsets.components, offsets.utilities]);

-  let reservedBits = BigInt(highestOffset.toString(2).length);
+  reservedBits = BigInt(highestOffset.toString(2).length);
   context.layerOrder = {
     base: 1n << reservedBits << 0n,
     components: 1n << reservedBits << 1n,
@@ -499,6 +500,7 @@ function registerPlugins(plugins, context) {
   reservedBits += 3n;
   let offset = 0;
   context.variantOrder = new Map(variantList.map((variant, i) => {
+    if (variant.includes('lib')) return [variant, 1n];
     let variantFunctions = variantMap.get(variant).length;
     let bits = 1n << BigInt(i + offset) << reservedBits;
     offset += variantFunctions - 1;

Above patch is a temporary workaround to fix this issue in JIT.
Not a 100% working fix, but works in well in most of our cases.

• Replace lib with your variant in the lines 33 & 98
• Then add this .patch file to you package root at ./patches/tailwindcss+2.2.7.patch
• Install Patch Package

npm install -D patch-package

yarn add -D patch-package

• Add "postinstall": "patch-package" in your script
• Finally, run npm install/yarn install to apply the patch