tailwindcss 3.0.0-alpha.1 → 3.0.0-alpha.2

package/src/corePlugins.js

@@ -1,130 +1,60 @@
 import fs from 'fs'
+import * as path from 'path'
 import postcss from 'postcss'
 import createUtilityPlugin from './util/createUtilityPlugin'
 import buildMediaQuery from './util/buildMediaQuery'
-import prefixSelector from './util/prefixSelector'
 import parseAnimationValue from './util/parseAnimationValue'
 import flattenColorPalette from './util/flattenColorPalette'
 import withAlphaVariable, { withAlphaValue } from './util/withAlphaVariable'
 import toColorValue from './util/toColorValue'
 import isPlainObject from './util/isPlainObject'
 import transformThemeValue from './util/transformThemeValue'
-import {
-  applyStateToMarker,
-  updateLastClasses,
-  updateAllClasses,
-  transformAllSelectors,
-  transformAllClasses,
-  transformLastClasses,
-} from './util/pluginUtils'
 import { version as tailwindVersion } from '../package.json'
 import log from './util/log'
+import { formatBoxShadowValue, parseBoxShadowValue } from './util/parseBoxShadowValue'
 
 export let variantPlugins = {
-  pseudoElementVariants: ({ config, addVariant }) => {
-    addVariant(
-      'first-letter',
-      transformAllSelectors((selector) => {
-        return updateAllClasses(selector, (className, { withPseudo }) => {
-          return withPseudo(`first-letter${config('separator')}${className}`, '::first-letter')
-        })
-      })
-    )
+  pseudoElementVariants: ({ addVariant }) => {
+    addVariant('first-letter', '&::first-letter')
+    addVariant('first-line', '&::first-line')
 
-    addVariant(
-      'first-line',
-      transformAllSelectors((selector) => {
-        return updateAllClasses(selector, (className, { withPseudo }) => {
-          return withPseudo(`first-line${config('separator')}${className}`, '::first-line')
-        })
-      })
-    )
+    addVariant('marker', ['& *::marker', '&::marker'])
+    addVariant('selection', ['& *::selection', '&::selection'])
 
-    addVariant('marker', [
-      transformAllSelectors((selector) => {
-        let variantSelector = updateAllClasses(selector, (className) => {
-          return `marker${config('separator')}${className}`
-        })
+    addVariant('file', '&::file-selector-button')
 
-        return `${variantSelector} *::marker`
-      }),
-      transformAllSelectors((selector) => {
-        return updateAllClasses(selector, (className, { withPseudo }) => {
-          return withPseudo(`marker${config('separator')}${className}`, '::marker')
+    addVariant('before', ({ container }) => {
+      container.walkRules((rule) => {
+        let foundContent = false
+        rule.walkDecls('content', () => {
+          foundContent = true
         })
-      }),
-    ])
 
-    addVariant('selection', [
-      transformAllSelectors((selector) => {
-        let variantSelector = updateAllClasses(selector, (className) => {
-          return `selection${config('separator')}${className}`
-        })
+        if (!foundContent) {
+          rule.prepend(postcss.decl({ prop: 'content', value: 'var(--tw-content)' }))
+        }
+      })
 
-        return `${variantSelector} *::selection`
-      }),
-      transformAllSelectors((selector) => {
-        return updateAllClasses(selector, (className, { withPseudo }) => {
-          return withPseudo(`selection${config('separator')}${className}`, '::selection')
-        })
-      }),
-    ])
+      return '&::before'
+    })
 
-    addVariant(
-      'file',
-      transformAllSelectors((selector) => {
-        return updateAllClasses(selector, (className, { withPseudo }) => {
-          return withPseudo(`file${config('separator')}${className}`, '::file-selector-button')
+    addVariant('after', ({ container }) => {
+      container.walkRules((rule) => {
+        let foundContent = false
+        rule.walkDecls('content', () => {
+          foundContent = true
         })
-      })
-    )
 
-    addVariant(
-      'before',
-      transformAllSelectors(
-        (selector) => {
-          return updateAllClasses(selector, (className, { withPseudo }) => {
-            return withPseudo(`before${config('separator')}${className}`, '::before')
-          })
-        },
-        {
-          withRule: (rule) => {
-            let foundContent = false
-            rule.walkDecls('content', () => {
-              foundContent = true
-            })
-            if (!foundContent) {
-              rule.prepend(postcss.decl({ prop: 'content', value: '""' }))
-            }
-          },
+        if (!foundContent) {
+          rule.prepend(postcss.decl({ prop: 'content', value: 'var(--tw-content)' }))
         }
-      )
-    )
+      })
 
-    addVariant(
-      'after',
-      transformAllSelectors(
-        (selector) => {
-          return updateAllClasses(selector, (className, { withPseudo }) => {
-            return withPseudo(`after${config('separator')}${className}`, '::after')
-          })
-        },
-        {
-          withRule: (rule) => {
-            let foundContent = false
-            rule.walkDecls('content', () => {
-              foundContent = true
-            })
-            if (!foundContent) {
-              rule.prepend(postcss.decl({ prop: 'content', value: '""' }))
-            }
-          },
-        }
-      )
-    )
+      return '&::after'
+    })
   },
 
-  pseudoClassVariants: ({ config, addVariant }) => {
+  pseudoClassVariants: ({ addVariant }) => {
     let pseudoVariants = [
       // Positional
       ['first', ':first-child'],
@@ -164,137 +94,44 @@ export let variantPlugins = {
       'focus-visible',
       'active',
       'disabled',
-    ]
-
-    for (let variant of pseudoVariants) {
-      let [variantName, state] = Array.isArray(variant) ? variant : [variant, `:${variant}`]
-
-      addVariant(
-        variantName,
-        transformAllClasses((className, { withAttr, withPseudo }) => {
-          if (state.startsWith(':')) {
-            return withPseudo(`${variantName}${config('separator')}${className}`, state)
-          } else if (state.startsWith('[')) {
-            return withAttr(`${variantName}${config('separator')}${className}`, state)
-          }
-        })
-      )
-    }
-
-    let groupMarker = prefixSelector(config('prefix'), '.group')
-    for (let variant of pseudoVariants) {
-      let [variantName, state] = Array.isArray(variant) ? variant : [variant, `:${variant}`]
-      let groupVariantName = `group-${variantName}`
-
-      addVariant(
-        groupVariantName,
-        transformAllSelectors((selector) => {
-          let variantSelector = updateAllClasses(selector, (className) => {
-            if (`.${className}` === groupMarker) return className
-            return `${groupVariantName}${config('separator')}${className}`
-          })
+    ].map((variant) => (Array.isArray(variant) ? variant : [variant, `:${variant}`]))
 
-          if (variantSelector === selector) {
-            return null
-          }
-
-          return applyStateToMarker(
-            variantSelector,
-            groupMarker,
-            state,
-            (marker, selector) => `${marker} ${selector}`
-          )
-        })
-      )
+    for (let [variantName, state] of pseudoVariants) {
+      addVariant(variantName, `&${state}`)
     }
 
-    let peerMarker = prefixSelector(config('prefix'), '.peer')
-    for (let variant of pseudoVariants) {
-      let [variantName, state] = Array.isArray(variant) ? variant : [variant, `:${variant}`]
-      let peerVariantName = `peer-${variantName}`
-
-      addVariant(
-        peerVariantName,
-        transformAllSelectors((selector) => {
-          let variantSelector = updateAllClasses(selector, (className) => {
-            if (`.${className}` === peerMarker) return className
-            return `${peerVariantName}${config('separator')}${className}`
-          })
-
-          if (variantSelector === selector) {
-            return null
-          }
+    for (let [variantName, state] of pseudoVariants) {
+      addVariant(`group-${variantName}`, `:merge(.group)${state} &`)
+    }
 
-          return applyStateToMarker(variantSelector, peerMarker, state, (marker, selector) =>
-            selector.trim().startsWith('~') ? `${marker}${selector}` : `${marker} ~ ${selector}`
-          )
-        })
-      )
+    for (let [variantName, state] of pseudoVariants) {
+      addVariant(`peer-${variantName}`, `:merge(.peer)${state} ~ &`)
     }
   },
 
-  directionVariants: ({ config, addVariant }) => {
-    addVariant(
-      'ltr',
-      transformAllSelectors((selector) => {
-        log.warn('rtl-experimental', [
-          'The RTL features in Tailwind CSS are currently in preview.',
-          'Preview features are not covered by semver, and may be improved in breaking ways at any time.',
-        ])
-        return `[dir="ltr"] ${updateAllClasses(
-          selector,
-          (className) => `ltr${config('separator')}${className}`
-        )}`
-      })
-    )
+  directionVariants: ({ addVariant }) => {
+    addVariant('ltr', () => {
+      log.warn('rtl-experimental', [
+        'The RTL features in Tailwind CSS are currently in preview.',
+        'Preview features are not covered by semver, and may be improved in breaking ways at any time.',
+      ])
 
-    addVariant(
-      'rtl',
-      transformAllSelectors((selector) => {
-        log.warn('rtl-experimental', [
-          'The RTL features in Tailwind CSS are currently in preview.',
-          'Preview features are not covered by semver, and may be improved in breaking ways at any time.',
-        ])
-        return `[dir="rtl"] ${updateAllClasses(
-          selector,
-          (className) => `rtl${config('separator')}${className}`
-        )}`
-      })
-    )
-  },
+      return '[dir="ltr"] &'
+    })
 
-  reducedMotionVariants: ({ config, addVariant }) => {
-    addVariant(
-      'motion-safe',
-      transformLastClasses(
-        (className) => {
-          return `motion-safe${config('separator')}${className}`
-        },
-        {
-          wrap: () =>
-            postcss.atRule({
-              name: 'media',
-              params: '(prefers-reduced-motion: no-preference)',
-            }),
-        }
-      )
-    )
+    addVariant('rtl', () => {
+      log.warn('rtl-experimental', [
+        'The RTL features in Tailwind CSS are currently in preview.',
+        'Preview features are not covered by semver, and may be improved in breaking ways at any time.',
+      ])
 
-    addVariant(
-      'motion-reduce',
-      transformLastClasses(
-        (className) => {
-          return `motion-reduce${config('separator')}${className}`
-        },
-        {
-          wrap: () =>
-            postcss.atRule({
-              name: 'media',
-              params: '(prefers-reduced-motion: reduce)',
-            }),
-        }
-      )
-    )
+      return '[dir="rtl"] &'
+    })
+  },
+
+  reducedMotionVariants: ({ addVariant }) => {
+    addVariant('motion-safe', '@media (prefers-reduced-motion: no-preference)')
+    addVariant('motion-reduce', '@media (prefers-reduced-motion: reduce)')
   },
 
   darkVariants: ({ config, addVariant }) => {
@@ -308,62 +145,31 @@ export let variantPlugins = {
     }
 
     if (mode === 'class') {
-      addVariant(
-        'dark',
-        transformAllSelectors((selector) => {
-          let variantSelector = updateLastClasses(selector, (className) => {
-            return `dark${config('separator')}${className}`
-          })
-
-          if (variantSelector === selector) {
-            return null
-          }
-
-          let darkSelector = prefixSelector(config('prefix'), `.dark`)
-
-          return `${darkSelector} ${variantSelector}`
-        })
-      )
+      addVariant('dark', '.dark &')
     } else if (mode === 'media') {
-      addVariant(
-        'dark',
-        transformLastClasses(
-          (className) => {
-            return `dark${config('separator')}${className}`
-          },
-          {
-            wrap: () =>
-              postcss.atRule({
-                name: 'media',
-                params: '(prefers-color-scheme: dark)',
-              }),
-          }
-        )
-      )
+      addVariant('dark', '@media (prefers-color-scheme: dark)')
     }
   },
 
-  screenVariants: ({ config, theme, addVariant }) => {
+  printVariant: ({ addVariant }) => {
+    addVariant('print', '@media print')
+  },
+
+  screenVariants: ({ theme, addVariant }) => {
     for (let screen in theme('screens')) {
       let size = theme('screens')[screen]
       let query = buildMediaQuery(size)
 
-      addVariant(
-        screen,
-        transformLastClasses(
-          (className) => {
-            return `${screen}${config('separator')}${className}`
-          },
-          { wrap: () => postcss.atRule({ name: 'media', params: query }) }
-        )
-      )
+      addVariant(screen, `@media ${query}`)
     }
   },
 }
 
 export let corePlugins = {
   preflight: ({ addBase }) => {
-    let preflightStyles = postcss.parse(fs.readFileSync(`${__dirname}/css/preflight.css`, 'utf8'))
+    let preflightStyles = postcss.parse(
+      fs.readFileSync(path.join(__dirname, './css/preflight.css'), 'utf8')
+    )
 
     addBase([
       postcss.comment({
@@ -529,19 +335,23 @@ export let corePlugins = {
     })
   },
 
-  inset: createUtilityPlugin('inset', [
-    ['inset', ['top', 'right', 'bottom', 'left']],
-    [
-      ['inset-x', ['left', 'right']],
-      ['inset-y', ['top', 'bottom']],
-    ],
+  inset: createUtilityPlugin(
+    'inset',
     [
-      ['top', ['top']],
-      ['right', ['right']],
-      ['bottom', ['bottom']],
-      ['left', ['left']],
+      ['inset', ['top', 'right', 'bottom', 'left']],
+      [
+        ['inset-x', ['left', 'right']],
+        ['inset-y', ['top', 'bottom']],
+      ],
+      [
+        ['top', ['top']],
+        ['right', ['right']],
+        ['bottom', ['bottom']],
+        ['left', ['left']],
+      ],
     ],
-  ]),
+    { supportsNegativeValues: true }
+  ),
 
   isolation: ({ addUtilities }) => {
     addUtilities({
@@ -550,8 +360,8 @@ export let corePlugins = {
     })
   },
 
-  zIndex: createUtilityPlugin('zIndex', [['z', ['zIndex']]]),
-  order: createUtilityPlugin('order'),
+  zIndex: createUtilityPlugin('zIndex', [['z', ['zIndex']]], { supportsNegativeValues: true }),
+  order: createUtilityPlugin('order', undefined, { supportsNegativeValues: true }),
   gridColumn: createUtilityPlugin('gridColumn', [['col', ['gridColumn']]]),
   gridColumnStart: createUtilityPlugin('gridColumnStart', [['col-start', ['gridColumnStart']]]),
   gridColumnEnd: createUtilityPlugin('gridColumnEnd', [['col-end', ['gridColumnEnd']]]),
@@ -576,19 +386,23 @@ export let corePlugins = {
     })
   },
 
-  margin: createUtilityPlugin('margin', [
-    ['m', ['margin']],
-    [
-      ['mx', ['margin-left', 'margin-right']],
-      ['my', ['margin-top', 'margin-bottom']],
-    ],
+  margin: createUtilityPlugin(
+    'margin',
     [
-      ['mt', ['margin-top']],
-      ['mr', ['margin-right']],
-      ['mb', ['margin-bottom']],
-      ['ml', ['margin-left']],
+      ['m', ['margin']],
+      [
+        ['mx', ['margin-left', 'margin-right']],
+        ['my', ['margin-top', 'margin-bottom']],
+      ],
+      [
+        ['mt', ['margin-top']],
+        ['mr', ['margin-right']],
+        ['mb', ['margin-bottom']],
+        ['ml', ['margin-left']],
+      ],
     ],
-  ]),
+    { supportsNegativeValues: true }
+  ),
 
   boxSizing: ({ addUtilities }) => {
     addUtilities({
@@ -634,8 +448,15 @@ export let corePlugins = {
   maxWidth: createUtilityPlugin('maxWidth', [['max-w', ['maxWidth']]]),
 
   flex: createUtilityPlugin('flex'),
-  flexShrink: createUtilityPlugin('flexShrink', [['flex-shrink', ['flex-shrink']]]),
-  flexGrow: createUtilityPlugin('flexGrow', [['flex-grow', ['flex-grow']]]),
+  flexShrink: createUtilityPlugin('flexShrink', [
+    ['flex-shrink', ['flex-shrink']], // Deprecated
+    ['shrink', ['flex-shrink']],
+  ]),
+  flexGrow: createUtilityPlugin('flexGrow', [
+    ['flex-grow', ['flex-grow']], // Deprecated
+    ['grow', ['flex-grow']],
+  ]),
+  flexBasis: createUtilityPlugin('flexBasis', [['basis', ['flex-basis']]]),
 
   tableLayout: ({ addUtilities }) => {
     addUtilities({
@@ -652,33 +473,48 @@ export let corePlugins = {
   },
 
   transformOrigin: createUtilityPlugin('transformOrigin', [['origin', ['transformOrigin']]]),
-  translate: createUtilityPlugin('translate', [
+  translate: createUtilityPlugin(
+    'translate',
     [
       [
-        'translate-x',
-        [['@defaults transform', {}], '--tw-translate-x', ['transform', 'var(--tw-transform)']],
-      ],
-      [
-        'translate-y',
-        [['@defaults transform', {}], '--tw-translate-y', ['transform', 'var(--tw-transform)']],
+        [
+          'translate-x',
+          [['@defaults transform', {}], '--tw-translate-x', ['transform', 'var(--tw-transform)']],
+        ],
+        [
+          'translate-y',
+          [['@defaults transform', {}], '--tw-translate-y', ['transform', 'var(--tw-transform)']],
+        ],
       ],
     ],
-  ]),
-  rotate: createUtilityPlugin('rotate', [
-    ['rotate', [['@defaults transform', {}], '--tw-rotate', ['transform', 'var(--tw-transform)']]],
-  ]),
-  skew: createUtilityPlugin('skew', [
+    { supportsNegativeValues: true }
+  ),
+  rotate: createUtilityPlugin(
+    'rotate',
     [
       [
-        'skew-x',
-        [['@defaults transform', {}], '--tw-skew-x', ['transform', 'var(--tw-transform)']],
+        'rotate',
+        [['@defaults transform', {}], '--tw-rotate', ['transform', 'var(--tw-transform)']],
       ],
+    ],
+    { supportsNegativeValues: true }
+  ),
+  skew: createUtilityPlugin(
+    'skew',
+    [
       [
-        'skew-y',
-        [['@defaults transform', {}], '--tw-skew-y', ['transform', 'var(--tw-transform)']],
+        [
+          'skew-x',
+          [['@defaults transform', {}], '--tw-skew-x', ['transform', 'var(--tw-transform)']],
+        ],
+        [
+          'skew-y',
+          [['@defaults transform', {}], '--tw-skew-y', ['transform', 'var(--tw-transform)']],
+        ],
       ],
     ],
-  ]),
+    { supportsNegativeValues: true }
+  ),
   scale: createUtilityPlugin('scale', [
     [
       'scale',
@@ -858,19 +694,23 @@ export let corePlugins = {
     })
   },
 
-  scrollMargin: createUtilityPlugin('scrollMargin', [
-    ['scroll-m', ['scroll-margin']],
-    [
-      ['scroll-mx', ['scroll-margin-left', 'scroll-margin-right']],
-      ['scroll-my', ['scroll-margin-top', 'scroll-margin-bottom']],
-    ],
+  scrollMargin: createUtilityPlugin(
+    'scrollMargin',
     [
-      ['scroll-mt', ['scroll-margin-top']],
-      ['scroll-mr', ['scroll-margin-right']],
-      ['scroll-mb', ['scroll-margin-bottom']],
-      ['scroll-ml', ['scroll-margin-left']],
+      ['scroll-m', ['scroll-margin']],
+      [
+        ['scroll-mx', ['scroll-margin-left', 'scroll-margin-right']],
+        ['scroll-my', ['scroll-margin-top', 'scroll-margin-bottom']],
+      ],
+      [
+        ['scroll-mt', ['scroll-margin-top']],
+        ['scroll-mr', ['scroll-margin-right']],
+        ['scroll-mb', ['scroll-margin-bottom']],
+        ['scroll-ml', ['scroll-margin-left']],
+      ],
     ],
-  ]),
+    { supportsNegativeValues: true }
+  ),
 
   scrollPadding: createUtilityPlugin('scrollPadding', [
     ['scroll-p', ['scroll-padding']],
@@ -1068,7 +908,7 @@ export let corePlugins = {
           }
         },
       },
-      { values: theme('space') }
+      { values: theme('space'), supportsNegativeValues: true }
     )
 
     addUtilities({
@@ -1640,7 +1480,9 @@ export let corePlugins = {
     })
   },
 
-  textIndent: createUtilityPlugin('textIndent', [['indent', ['text-indent']]]),
+  textIndent: createUtilityPlugin('textIndent', [['indent', ['text-indent']]], {
+    supportsNegativeValues: true,
+  }),
 
   verticalAlign: ({ addUtilities, matchUtilities }) => {
     addUtilities({
@@ -1706,30 +1548,63 @@ export let corePlugins = {
 
   fontVariantNumeric: ({ addUtilities }) => {
     addUtilities({
-      '.ordinal, .slashed-zero, .lining-nums, .oldstyle-nums, .proportional-nums, .tabular-nums, .diagonal-fractions, .stacked-fractions':
-        {
-          '--tw-ordinal': 'var(--tw-empty,/*!*/ /*!*/)',
-          '--tw-slashed-zero': 'var(--tw-empty,/*!*/ /*!*/)',
-          '--tw-numeric-figure': 'var(--tw-empty,/*!*/ /*!*/)',
-          '--tw-numeric-spacing': 'var(--tw-empty,/*!*/ /*!*/)',
-          '--tw-numeric-fraction': 'var(--tw-empty,/*!*/ /*!*/)',
-          'font-variant-numeric':
-            'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)',
-        },
+      '@defaults font-variant-numeric': {
+        '--tw-ordinal': 'var(--tw-empty,/*!*/ /*!*/)',
+        '--tw-slashed-zero': 'var(--tw-empty,/*!*/ /*!*/)',
+        '--tw-numeric-figure': 'var(--tw-empty,/*!*/ /*!*/)',
+        '--tw-numeric-spacing': 'var(--tw-empty,/*!*/ /*!*/)',
+        '--tw-numeric-fraction': 'var(--tw-empty,/*!*/ /*!*/)',
+        '--tw-font-variant-numeric':
+          'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)',
+      },
       '.normal-nums': { 'font-variant-numeric': 'normal' },
-      '.ordinal': { '--tw-ordinal': 'ordinal' },
-      '.slashed-zero': { '--tw-slashed-zero': 'slashed-zero' },
-      '.lining-nums': { '--tw-numeric-figure': 'lining-nums' },
-      '.oldstyle-nums': { '--tw-numeric-figure': 'oldstyle-nums' },
-      '.proportional-nums': { '--tw-numeric-spacing': 'proportional-nums' },
-      '.tabular-nums': { '--tw-numeric-spacing': 'tabular-nums' },
-      '.diagonal-fractions': { '--tw-numeric-fraction': 'diagonal-fractions' },
-      '.stacked-fractions': { '--tw-numeric-fraction': 'stacked-fractions' },
+      '.ordinal': {
+        '@defaults font-variant-numeric': {},
+        '--tw-ordinal': 'ordinal',
+        'font-variant-numeric': 'var(--tw-font-variant-numeric)',
+      },
+      '.slashed-zero': {
+        '@defaults font-variant-numeric': {},
+        '--tw-slashed-zero': 'slashed-zero',
+        'font-variant-numeric': 'var(--tw-font-variant-numeric)',
+      },
+      '.lining-nums': {
+        '@defaults font-variant-numeric': {},
+        '--tw-numeric-figure': 'lining-nums',
+        'font-variant-numeric': 'var(--tw-font-variant-numeric)',
+      },
+      '.oldstyle-nums': {
+        '@defaults font-variant-numeric': {},
+        '--tw-numeric-figure': 'oldstyle-nums',
+        'font-variant-numeric': 'var(--tw-font-variant-numeric)',
+      },
+      '.proportional-nums': {
+        '@defaults font-variant-numeric': {},
+        '--tw-numeric-spacing': 'proportional-nums',
+        'font-variant-numeric': 'var(--tw-font-variant-numeric)',
+      },
+      '.tabular-nums': {
+        '@defaults font-variant-numeric': {},
+        '--tw-numeric-spacing': 'tabular-nums',
+        'font-variant-numeric': 'var(--tw-font-variant-numeric)',
+      },
+      '.diagonal-fractions': {
+        '@defaults font-variant-numeric': {},
+        '--tw-numeric-fraction': 'diagonal-fractions',
+        'font-variant-numeric': 'var(--tw-font-variant-numeric)',
+      },
+      '.stacked-fractions': {
+        '@defaults font-variant-numeric': {},
+        '--tw-numeric-fraction': 'stacked-fractions',
+        'font-variant-numeric': 'var(--tw-font-variant-numeric)',
+      },
     })
   },
 
   lineHeight: createUtilityPlugin('lineHeight', [['leading', ['lineHeight']]]),
-  letterSpacing: createUtilityPlugin('letterSpacing', [['tracking', ['letterSpacing']]]),
+  letterSpacing: createUtilityPlugin('letterSpacing', [['tracking', ['letterSpacing']]], {
+    supportsNegativeValues: true,
+  }),
 
   textColor: ({ matchUtilities, theme, corePlugins }) => {
     matchUtilities(
@@ -1760,6 +1635,17 @@ export let corePlugins = {
     })
   },
 
+  textDecorationColor: ({ matchUtilities, theme }) => {
+    matchUtilities(
+      {
+        decoration: (value) => {
+          return { 'text-decoration-color': toColorValue(value) }
+        },
+      },
+      { values: flattenColorPalette(theme('textDecorationColor')), type: ['color', 'any'] }
+    )
+  },
+
   fontSmoothing: ({ addUtilities }) => {
     addUtilities({
       '.antialiased': {
@@ -1889,6 +1775,7 @@ export let corePlugins = {
           '--tw-ring-offset-shadow': '0 0 #0000',
           '--tw-ring-shadow': '0 0 #0000',
           '--tw-shadow': '0 0 #0000',
+          '--tw-shadow-colored': '0 0 #0000',
         },
       })
 
@@ -1897,29 +1784,73 @@ export let corePlugins = {
           shadow: (value) => {
             value = transformValue(value)
 
+            let ast = parseBoxShadowValue(value)
+            for (let shadow of ast) {
+              // Don't override color if the whole shadow is a variable
+              if (!shadow.valid) {
+                continue
+              }
+
+              shadow.color = 'var(--tw-shadow-color)'
+            }
+
             return {
               '@defaults box-shadow': {},
               '--tw-shadow': value === 'none' ? '0 0 #0000' : value,
+              '--tw-shadow-colored': value === 'none' ? '0 0 #0000' : formatBoxShadowValue(ast),
               'box-shadow': defaultBoxShadow,
             }
           },
         },
-        { values: theme('boxShadow') }
+        { values: theme('boxShadow'), type: ['shadow'] }
       )
     }
   })(),
 
-  outline: ({ matchUtilities, theme }) => {
+  boxShadowColor: ({ matchUtilities, theme }) => {
     matchUtilities(
       {
-        outline: (value) => {
-          value = Array.isArray(value) ? value : value.split(',')
-          let [outline, outlineOffset = '0'] = Array.isArray(value) ? value : [value]
+        shadow: (value) => {
+          return {
+            '--tw-shadow-color': toColorValue(value),
+            '--tw-shadow': 'var(--tw-shadow-colored)',
+          }
+        },
+      },
+      { values: flattenColorPalette(theme('boxShadowColor')), type: ['color'] }
+    )
+  },
+
+  outlineStyle: ({ addUtilities }) => {
+    addUtilities({
+      '.outline-none': {
+        outline: '2px solid transparent',
+        'outline-offset': '2px',
+      },
+      '.outline': { 'outline-style': 'solid' },
+      '.outline-dashed': { 'outline-style': 'dashed' },
+      '.outline-dotted': { 'outline-style': 'dotted' },
+      '.outline-double': { 'outline-style': 'double' },
+      '.outline-hidden': { 'outline-style': 'hidden' },
+    })
+  },
+
+  outlineWidth: createUtilityPlugin('outlineWidth', [['outline', ['outline-width']]], {
+    type: ['length', 'number', 'percentage'],
+  }),
 
-          return { outline, 'outline-offset': outlineOffset }
+  outlineOffset: createUtilityPlugin('outlineOffset', [['outline-offset', ['outline-offset']]], {
+    type: ['length', 'number', 'percentage'],
+  }),
+
+  outlineColor: ({ matchUtilities, theme }) => {
+    matchUtilities(
+      {
+        outline: (value) => {
+          return { 'outline-color': toColorValue(value) }
         },
       },
-      { values: theme('outline') }
+      { values: flattenColorPalette(theme('outlineColor')), type: ['color'] }
     )
   },
 
@@ -1940,6 +1871,7 @@ export let corePlugins = {
         '--tw-ring-offset-shadow': '0 0 #0000',
         '--tw-ring-shadow': '0 0 #0000',
         '--tw-shadow': '0 0 #0000',
+        '--tw-shadow-colored': '0 0 #0000',
       },
     })
 
@@ -2098,7 +2030,7 @@ export let corePlugins = {
           }
         },
       },
-      { values: theme('hueRotate') }
+      { values: theme('hueRotate'), supportsNegativeValues: true }
     )
   },
 
@@ -2249,7 +2181,7 @@ export let corePlugins = {
           }
         },
       },
-      { values: theme('backdropHueRotate') }
+      { values: theme('backdropHueRotate'), supportsNegativeValues: true }
     )
   },
 
@@ -2381,5 +2313,7 @@ export let corePlugins = {
     { filterDefault: true }
   ),
   willChange: createUtilityPlugin('willChange', [['will-change', ['will-change']]]),
-  content: createUtilityPlugin('content'),
+  content: createUtilityPlugin('content', [
+    ['content', ['--tw-content', ['content', 'var(--tw-content)']]],
+  ]),
 }