From 782c733b907f369e9d1442f6e541d4ddf306a7d8 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Thu, 26 Oct 2023 14:14:43 -0400 Subject: [PATCH] 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 --- CHANGELOG.md | 1 + stubs/config.full.js | 14 +- .../__snapshots__/maxWidth.test.js.snap | 136 ++++++++++++++++++ .../__snapshots__/minHeight.test.js.snap | 136 ++++++++++++++++++ .../__snapshots__/minWidth.test.js.snap | 136 ++++++++++++++++++ 5 files changed, 416 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 106ac478f4e2..eefc94f2a6ed 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/stubs/config.full.js b/stubs/config.full.js index 130f91ba0e97..b3241edc18e3 100644 --- a/stubs/config.full.js +++ b/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', diff --git a/tests/plugins/__snapshots__/maxWidth.test.js.snap b/tests/plugins/__snapshots__/maxWidth.test.js.snap index 55c89ffcf32a..74c3e2e75633 100644 --- a/tests/plugins/__snapshots__/maxWidth.test.js.snap +++ b/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; } diff --git a/tests/plugins/__snapshots__/minHeight.test.js.snap b/tests/plugins/__snapshots__/minHeight.test.js.snap index 3db4e435a3e9..990c6bedf60d 100644 --- a/tests/plugins/__snapshots__/minHeight.test.js.snap +++ b/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; } diff --git a/tests/plugins/__snapshots__/minWidth.test.js.snap b/tests/plugins/__snapshots__/minWidth.test.js.snap index 83224bf5f9cd..5d8ad7d99e95 100644 --- a/tests/plugins/__snapshots__/minWidth.test.js.snap +++ b/tests/plugins/__snapshots__/minWidth.test.js.snap @@ -6,6 +6,138 @@ exports[`should test the 'minWidth' plugin 1`] = ` min-width: 0; } +.min-w-0\\.5 { + min-width: .125rem; +} + +.min-w-1 { + min-width: .25rem; +} + +.min-w-1\\.5 { + min-width: .375rem; +} + +.min-w-10 { + min-width: 2.5rem; +} + +.min-w-11 { + min-width: 2.75rem; +} + +.min-w-12 { + min-width: 3rem; +} + +.min-w-14 { + min-width: 3.5rem; +} + +.min-w-16 { + min-width: 4rem; +} + +.min-w-2 { + min-width: .5rem; +} + +.min-w-2\\.5 { + min-width: .625rem; +} + +.min-w-20 { + min-width: 5rem; +} + +.min-w-24 { + min-width: 6rem; +} + +.min-w-28 { + min-width: 7rem; +} + +.min-w-3 { + min-width: .75rem; +} + +.min-w-3\\.5 { + min-width: .875rem; +} + +.min-w-32 { + min-width: 8rem; +} + +.min-w-36 { + min-width: 9rem; +} + +.min-w-4 { + min-width: 1rem; +} + +.min-w-40 { + min-width: 10rem; +} + +.min-w-44 { + min-width: 11rem; +} + +.min-w-48 { + min-width: 12rem; +} + +.min-w-5 { + min-width: 1.25rem; +} + +.min-w-52 { + min-width: 13rem; +} + +.min-w-56 { + min-width: 14rem; +} + +.min-w-6 { + min-width: 1.5rem; +} + +.min-w-60 { + min-width: 15rem; +} + +.min-w-64 { + min-width: 16rem; +} + +.min-w-7 { + min-width: 1.75rem; +} + +.min-w-72 { + min-width: 18rem; +} + +.min-w-8 { + min-width: 2rem; +} + +.min-w-80 { + min-width: 20rem; +} + +.min-w-9 { + min-width: 2.25rem; +} + +.min-w-96 { + min-width: 24rem; +} + .min-w-\\[12px\\] { min-width: 12px; } @@ -30,5 +162,9 @@ exports[`should test the 'minWidth' plugin 1`] = ` .min-w-min { min-width: min-content; } + +.min-w-px { + min-width: 1px; +} " `;