Merge pull request #2141 from tailwindlabs/extended-spacing-scale

Add experimental extended spacing scale

src/featureFlags.js

@@ -3,7 +3,7 @@ import chalk from 'chalk'
 
 const featureFlags = {
   future: ['removeDeprecatedGapUtilities'],
-  experimental: ['uniformColorPalette'],
+  experimental: ['uniformColorPalette', 'extendedSpacingScale'],
 }
 
 export function flagEnabled(config, flag) {

src/flagged/extendedSpacingScale.js

@@ -0,0 +1,110 @@
+export default {
+  theme: {
+    spacing: {
+      px: '1px',
+      '0': '0',
+      '0.5': '0.125rem',
+      '1': '0.25rem',
+      '1.5': '0.375rem',
+      '2': '0.5rem',
+      '2.5': '0.625rem',
+      '3': '0.75rem',
+      '3.5': '0.875rem',
+      '4': '1rem',
+      '5': '1.25rem',
+      '6': '1.5rem',
+      '7': '1.75rem',
+      '8': '2rem',
+      '9': '2.25rem',
+      '10': '2.5rem',
+      '11': '2.75rem',
+      '12': '3rem',
+      '13': '3.25rem',
+      '14': '3.5rem',
+      '15': '3.75rem',
+      '16': '4rem',
+      '20': '5rem',
+      '24': '6rem',
+      '28': '7rem',
+      '32': '8rem',
+      '36': '9rem',
+      '40': '10rem',
+      '44': '11rem',
+      '48': '12rem',
+      '52': '13rem',
+      '56': '14rem',
+      '60': '15rem',
+      '64': '16rem',
+      '72': '18rem',
+      '80': '20rem',
+      '96': '24rem',
+      '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%',
+    },
+    inset: theme => ({
+      auto: 'auto',
+      ...theme('spacing'),
+    }),
+    minWidth: {
+      '0': '0',
+      full: '100%',
+      'min-content': 'min-content',
+      'max-content': 'max-content',
+    },
+    width: theme => ({
+      auto: 'auto',
+      ...theme('spacing'),
+      screen: '100vw',
+      'min-content': 'min-content',
+      'max-content': 'max-content',
+    }),
+    maxWidth: (theme, { breakpoints }) => ({
+      none: 'none',
+      '0': '0rem',
+      xs: '20rem',
+      sm: '24rem',
+      md: '28rem',
+      lg: '32rem',
+      xl: '36rem',
+      '2xl': '42rem',
+      '3xl': '48rem',
+      '4xl': '56rem',
+      '5xl': '64rem',
+      '6xl': '72rem',
+      '7xl': '80rem',
+      full: '100%',
+      'min-content': 'min-content',
+      'max-content': 'max-content',
+      ...breakpoints(theme('screens')),
+    }),
+    maxHeight: theme => ({
+      screen: '100vh',
+      ...theme('spacing'),
+    }),
+  },
+}

src/index.js

@@ -14,6 +14,7 @@ import defaultConfig from '../stubs/defaultConfig.stub.js'
 import { flagEnabled } from './featureFlags'
 
 import uniformColorPalette from './flagged/uniformColorPalette.js'
+import extendedSpacingScale from './flagged/extendedSpacingScale.js'
 
 function getDefaultConfigs(config) {
   const configs = [defaultConfig]
@@ -22,6 +23,10 @@ function getDefaultConfigs(config) {
     configs.unshift(uniformColorPalette)
   }
 
+  if (flagEnabled(config, 'extendedSpacingScale')) {
+    configs.unshift(extendedSpacingScale)
+  }
+
   return configs
 }