feat: auto-* directives

packages/core/src/__tests__/api.json

@@ -354,6 +354,18 @@
   "grid-rows-none": ".grid-rows-none{grid-template-rows:none}",
   "grid-flow-row": ".grid-flow-row{grid-auto-flow:row}",
   "grid-flow-col": ".grid-flow-col{grid-auto-flow:column}",
+  "auto-rows-auto": ".auto-rows-auto{grid-auto-rows:auto}",
+  "auto-rows-min": ".auto-rows-min{grid-auto-rows:min-content}",
+  "auto-rows-max": ".auto-rows-max{grid-auto-rows:max-content}",
+  "auto-rows-fr": ".auto-rows-fr{grid-auto-rows:minmax(0,1fr)}",
+  "auto-rows-2fr": ".auto-rows-2fr{grid-auto-rows:minmax(0,2fr)}",
+  "auto-rows-1-2fr": ".auto-rows-1-2fr{grid-auto-rows:minmax(1,2fr)}",
+  "auto-cols-auto": ".auto-cols-auto{grid-auto-columns:auto}",
+  "auto-cols-min": ".auto-cols-min{grid-auto-columns:min-content}",
+  "auto-cols-max": ".auto-cols-max{grid-auto-columns:max-content}",
+  "auto-cols-fr": ".auto-cols-fr{grid-auto-columns:minmax(0,1fr)}",
+  "auto-cols-2fr": ".auto-cols-2fr{grid-auto-columns:minmax(0,2fr)}",
+  "auto-cols-1-2fr": ".auto-cols-1-2fr{grid-auto-columns:minmax(1,2fr)}",
   "min-w-0": ".min-w-0{min-width:0px}",
   "max-w-none": ".max-w-none{max-width:none}",
   "max-w-full": ".max-w-full{max-width:100%}",

packages/core/src/tailwind/plugins.ts

@@ -301,6 +301,20 @@ export const corePlugins: Plugins = {
     return display(params, context, id)
   },
 
+  auto: (params) =>
+    includes(['cols', 'rows'], params[0]) &&
+    (_ =
+      params.length === 2
+        ? ({
+            auto: 'auto',
+            min: 'min-content',
+            max: 'max-content',
+            fr: 'minmax(0,1fr)',
+          } as Record<string, undefined | string>)[params[1]] || `minmax(0,${params[1]})`
+        : params.length > 2 && `minmax(${join(tail(params), ',')})`) && {
+      [`grid-auto-${params[0] === 'cols' ? 'columns' : 'rows'}`]: _,
+    },
+
   static: position,
   fixed: position,
   absolute: position,