Add size-* shorthand (#12287)

* Add `size-*` shorthand Add plugin tests Adjust options wip * Update changelog
tailwindlabs · Dec 4, 2023 · d63a9f9 · d63a9f9
1 parent 80fe52a
commit d63a9f9
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Extend default `opacity` scale to include all steps of 5 ([#11832](https://github.com/tailwindlabs/tailwindcss/pull/11832))
 - Update Preflight `html` styles to include shadow DOM `:host` pseudo-class ([#11200](https://github.com/tailwindlabs/tailwindcss/pull/11200))
 - 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))
 
 
 ## [3.3.6] - 2023-12-04

diff --git a/src/corePlugins.js b/src/corePlugins.js
@@ -779,6 +779,8 @@ export let corePlugins = {
 
   aspectRatio: createUtilityPlugin('aspectRatio', [['aspect', ['aspect-ratio']]]),
 
+  size: createUtilityPlugin('size', [['size', ['width', 'height']]]),
+
   height: createUtilityPlugin('height', [['h', ['height']]]),
   maxHeight: createUtilityPlugin('maxHeight', [['max-h', ['maxHeight']]]),
   minHeight: createUtilityPlugin('minHeight', [['min-h', ['minHeight']]]),

diff --git a/stubs/config.full.js b/stubs/config.full.js
@@ -975,6 +975,40 @@ module.exports = {
       '3/4': '75%',
       full: '100%',
     }),
+    size: ({ theme }) => ({
+      auto: 'auto',
+      ...theme('spacing'),
+      '1/2': '50%',
+      '1/3': '33.333333%',
+      '2/3': '66.666667%',
+      '1/4': '25%',
+      '2/4': '50%',
+      '3/4': '75%',
+      '1/5': '20%',
+      '2/5': '40%',
+      '3/5': '60%',
+      '4/5': '80%',
+      '1/6': '16.666667%',
+      '2/6': '33.333333%',
+      '3/6': '50%',
+      '4/6': '66.666667%',
+      '5/6': '83.333333%',
+      '1/12': '8.333333%',
+      '2/12': '16.666667%',
+      '3/12': '25%',
+      '4/12': '33.333333%',
+      '5/12': '41.666667%',
+      '6/12': '50%',
+      '7/12': '58.333333%',
+      '8/12': '66.666667%',
+      '9/12': '75%',
+      '10/12': '83.333333%',
+      '11/12': '91.666667%',
+      full: '100%',
+      min: 'min-content',
+      max: 'max-content',
+      fit: 'fit-content',
+    }),
     width: ({ theme }) => ({
       auto: 'auto',
       ...theme('spacing'),