Add spacing scale to min-width, min-height, and max-width (#12300)

* Add spacing scale to `min-width`, `min-height`, and `max-width`

* Update snapshots

* Update changelog

Author: thecrypticace

CHANGELOG.md

@@ -31,6 +31,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Increase default values for `grid-rows-*` utilities from 1–6 to 1–12 ([#12180](https://github.com/tailwindlabs/tailwindcss/pull/12180))
 - Add `size-*` utilities ([#12287](https://github.com/tailwindlabs/tailwindcss/pull/12287))
 - Add utilities for CSS subgrid ([#12298](https://github.com/tailwindlabs/tailwindcss/pull/12298))
+- Add spacing scale to `min-w-*`, `min-h-*`, and `max-w-*` utilities ([#12300](https://github.com/tailwindlabs/tailwindcss/pull/12300))
 
 ### Changed
 

stubs/config.full.js

@@ -651,8 +651,8 @@ module.exports = {
       fit: 'fit-content',
     }),
     maxWidth: ({ theme, breakpoints }) => ({
+      ...theme('spacing'),
       none: 'none',
-      0: '0rem',
       xs: '20rem',
       sm: '24rem',
       md: '28rem',
@@ -671,8 +671,8 @@ module.exports = {
       prose: '65ch',
       ...breakpoints(theme('screens')),
     }),
-    minHeight: {
-      0: '0px',
+    minHeight: ({ theme }) => ({
+      ...theme('spacing'),
       full: '100%',
       screen: '100vh',
       svh: '100svh',
@@ -681,14 +681,14 @@ module.exports = {
       min: 'min-content',
       max: 'max-content',
       fit: 'fit-content',
-    },
-    minWidth: {
-      0: '0px',
+    }),
+    minWidth: ({ theme }) => ({
+      ...theme('spacing'),
       full: '100%',
       min: 'min-content',
       max: 'max-content',
       fit: 'fit-content',
-    },
+    }),
     objectPosition: {
       bottom: 'bottom',
       center: 'center',

tests/plugins/__snapshots__/maxWidth.test.js.snap

@@ -6,30 +6,162 @@ exports[`should test the 'maxWidth' plugin 1`] = `
   max-width: 0;
 }
 
+.max-w-0\\.5 {
+  max-width: .125rem;
+}
+
+.max-w-1 {
+  max-width: .25rem;
+}
+
+.max-w-1\\.5 {
+  max-width: .375rem;
+}
+
+.max-w-10 {
+  max-width: 2.5rem;
+}
+
+.max-w-11 {
+  max-width: 2.75rem;
+}
+
+.max-w-12 {
+  max-width: 3rem;
+}
+
+.max-w-14 {
+  max-width: 3.5rem;
+}
+
+.max-w-16 {
+  max-width: 4rem;
+}
+
+.max-w-2 {
+  max-width: .5rem;
+}
+
+.max-w-2\\.5 {
+  max-width: .625rem;
+}
+
+.max-w-20 {
+  max-width: 5rem;
+}
+
+.max-w-24 {
+  max-width: 6rem;
+}
+
+.max-w-28 {
+  max-width: 7rem;
+}
+
 .max-w-2xl {
   max-width: 42rem;
 }
 
+.max-w-3 {
+  max-width: .75rem;
+}
+
+.max-w-3\\.5 {
+  max-width: .875rem;
+}
+
+.max-w-32 {
+  max-width: 8rem;
+}
+
+.max-w-36 {
+  max-width: 9rem;
+}
+
 .max-w-3xl {
   max-width: 48rem;
 }
 
+.max-w-4 {
+  max-width: 1rem;
+}
+
+.max-w-40 {
+  max-width: 10rem;
+}
+
+.max-w-44 {
+  max-width: 11rem;
+}
+
+.max-w-48 {
+  max-width: 12rem;
+}
+
 .max-w-4xl {
   max-width: 56rem;
 }
 
+.max-w-5 {
+  max-width: 1.25rem;
+}
+
+.max-w-52 {
+  max-width: 13rem;
+}
+
+.max-w-56 {
+  max-width: 14rem;
+}
+
 .max-w-5xl {
   max-width: 64rem;
 }
 
+.max-w-6 {
+  max-width: 1.5rem;
+}
+
+.max-w-60 {
+  max-width: 15rem;
+}
+
+.max-w-64 {
+  max-width: 16rem;
+}
+
 .max-w-6xl {
   max-width: 72rem;
 }
 
+.max-w-7 {
+  max-width: 1.75rem;
+}
+
+.max-w-72 {
+  max-width: 18rem;
+}
+
 .max-w-7xl {
   max-width: 80rem;
 }
 
+.max-w-8 {
+  max-width: 2rem;
+}
+
+.max-w-80 {
+  max-width: 20rem;
+}
+
+.max-w-9 {
+  max-width: 2.25rem;
+}
+
+.max-w-96 {
+  max-width: 24rem;
+}
+
 .max-w-\\[12px\\] {
   max-width: 12px;
 }
@@ -71,6 +203,10 @@ exports[`should test the 'maxWidth' plugin 1`] = `
   max-width: 65ch;
 }
 
+.max-w-px {
+  max-width: 1px;
+}
+
 .max-w-screen-2xl {
   max-width: 1536px;
 }

tests/plugins/__snapshots__/minHeight.test.js.snap

@@ -6,6 +6,138 @@ exports[`should test the 'minHeight' plugin 1`] = `
   min-height: 0;
 }
 
+.min-h-0\\.5 {
+  min-height: .125rem;
+}
+
+.min-h-1 {
+  min-height: .25rem;
+}
+
+.min-h-1\\.5 {
+  min-height: .375rem;
+}
+
+.min-h-10 {
+  min-height: 2.5rem;
+}
+
+.min-h-11 {
+  min-height: 2.75rem;
+}
+
+.min-h-12 {
+  min-height: 3rem;
+}
+
+.min-h-14 {
+  min-height: 3.5rem;
+}
+
+.min-h-16 {
+  min-height: 4rem;
+}
+
+.min-h-2 {
+  min-height: .5rem;
+}
+
+.min-h-2\\.5 {
+  min-height: .625rem;
+}
+
+.min-h-20 {
+  min-height: 5rem;
+}
+
+.min-h-24 {
+  min-height: 6rem;
+}
+
+.min-h-28 {
+  min-height: 7rem;
+}
+
+.min-h-3 {
+  min-height: .75rem;
+}
+
+.min-h-3\\.5 {
+  min-height: .875rem;
+}
+
+.min-h-32 {
+  min-height: 8rem;
+}
+
+.min-h-36 {
+  min-height: 9rem;
+}
+
+.min-h-4 {
+  min-height: 1rem;
+}
+
+.min-h-40 {
+  min-height: 10rem;
+}
+
+.min-h-44 {
+  min-height: 11rem;
+}
+
+.min-h-48 {
+  min-height: 12rem;
+}
+
+.min-h-5 {
+  min-height: 1.25rem;
+}
+
+.min-h-52 {
+  min-height: 13rem;
+}
+
+.min-h-56 {
+  min-height: 14rem;
+}
+
+.min-h-6 {
+  min-height: 1.5rem;
+}
+
+.min-h-60 {
+  min-height: 15rem;
+}
+
+.min-h-64 {
+  min-height: 16rem;
+}
+
+.min-h-7 {
+  min-height: 1.75rem;
+}
+
+.min-h-72 {
+  min-height: 18rem;
+}
+
+.min-h-8 {
+  min-height: 2rem;
+}
+
+.min-h-80 {
+  min-height: 20rem;
+}
+
+.min-h-9 {
+  min-height: 2.25rem;
+}
+
+.min-h-96 {
+  min-height: 24rem;
+}
+
 .min-h-\\[12px\\] {
   min-height: 12px;
 }
@@ -39,6 +171,10 @@ exports[`should test the 'minHeight' plugin 1`] = `
   min-height: min-content;
 }
 
+.min-h-px {
+  min-height: 1px;
+}
+
 .min-h-screen {
   min-height: 100vh;
 }