tailwindcss 0.0.0-insiders.ca1dfd6 → 0.0.0-insiders.cab1fce

package/src/corePlugins.js

@@ -1,146 +1,103 @@
 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 escapeClassName from './util/escapeClassName'
 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 { normalizeScreens } from './util/normalizeScreens'
+import { formatBoxShadowValue, parseBoxShadowValue } from './util/parseBoxShadowValue'
+import { flagEnabled } from './featureFlags'
 
-export default {
-  // Variant plugins
-  pseudoElementVariants: ({ config, addVariant }) => {
-    addVariant(
-      'first-letter',
-      transformAllSelectors((selector) => {
-        return updateAllClasses(selector, (className, { withPseudo }) => {
-          return withPseudo(`first-letter${config('separator')}${className}`, '::first-letter')
-        })
-      })
-    )
+export let variantPlugins = {
+  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('placeholder', '&::placeholder')
 
-    addVariant('selection', [
-      transformAllSelectors((selector) => {
-        let variantSelector = updateAllClasses(selector, (className) => {
-          return `selection${config('separator')}${className}`
-        })
+    addVariant('backdrop', '&::backdrop')
 
-        return `${variantSelector} *::selection`
-      }),
-      transformAllSelectors((selector) => {
-        return updateAllClasses(selector, (className, { withPseudo }) => {
-          return withPseudo(`selection${config('separator')}${className}`, '::selection')
+    addVariant('before', ({ container }) => {
+      container.walkRules((rule) => {
+        let foundContent = false
+        rule.walkDecls('content', () => {
+          foundContent = true
         })
-      }),
-    ])
 
-    addVariant(
-      'file',
-      transformAllSelectors((selector) => {
-        return updateAllClasses(selector, (className, { withPseudo }) => {
-          return withPseudo(`file${config('separator')}${className}`, '::file-selector-button')
-        })
+        if (!foundContent) {
+          rule.prepend(postcss.decl({ prop: 'content', value: 'var(--tw-content)' }))
+        }
       })
-    )
 
-    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: '""' }))
-            }
-          },
-        }
-      )
-    )
+      return '&::before'
+    })
 
-    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: '""' }))
-            }
-          },
+    addVariant('after', ({ container }) => {
+      container.walkRules((rule) => {
+        let foundContent = false
+        rule.walkDecls('content', () => {
+          foundContent = true
+        })
+
+        if (!foundContent) {
+          rule.prepend(postcss.decl({ prop: 'content', value: 'var(--tw-content)' }))
         }
-      )
-    )
+      })
+
+      return '&::after'
+    })
   },
 
-  pseudoClassVariants: ({ config, addVariant }) => {
+  pseudoClassVariants: ({ addVariant, config }) => {
     let pseudoVariants = [
       // Positional
-      ['first', ':first-child'],
-      ['last', ':last-child'],
-      ['only', ':only-child'],
-      ['odd', ':nth-child(odd)'],
-      ['even', ':nth-child(even)'],
+      ['first', '&:first-child'],
+      ['last', '&:last-child'],
+      ['only', '&:only-child'],
+      ['odd', '&:nth-child(odd)'],
+      ['even', '&:nth-child(even)'],
       'first-of-type',
       'last-of-type',
       'only-of-type',
 
       // State
-      'visited',
+      [
+        'visited',
+        ({ container }) => {
+          let toRemove = ['--tw-text-opacity', '--tw-border-opacity', '--tw-bg-opacity']
+
+          container.walkDecls((decl) => {
+            if (toRemove.includes(decl.prop)) {
+              decl.remove()
+
+              return
+            }
+
+            for (const varName of toRemove) {
+              if (decl.value.includes(`/ var(${varName})`)) {
+                decl.value = decl.value.replace(`/ var(${varName})`, '')
+              }
+            }
+          })
+
+          return '&:visited'
+        },
+      ],
       'target',
-      ['open', '[open]'],
+      ['open', '&[open]'],
 
       // Forms
       'default',
@@ -160,204 +117,149 @@ export default {
 
       // Interactive
       'focus-within',
-      'hover',
+      [
+        'hover',
+        !flagEnabled(config(), 'hoverOnlyWhenSupported')
+          ? '&:hover'
+          : '@media (hover: hover) and (pointer: fine) { &:hover }',
+      ],
       'focus',
       'focus-visible',
       'active',
+      'enabled',
       '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)
-          }
-        })
-      )
-    }
+    ].map((variant) => (Array.isArray(variant) ? variant : [variant, `&:${variant}`]))
 
-    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}`
-          })
+    for (let [variantName, state] of pseudoVariants) {
+      addVariant(variantName, (ctx) => {
+        let result = typeof state === 'function' ? state(ctx) : state
 
-          if (variantSelector === selector) {
-            return null
-          }
-
-          return applyStateToMarker(
-            variantSelector,
-            groupMarker,
-            state,
-            (marker, selector) => `${marker} ${selector}`
-          )
-        })
-      )
+        return result
+      })
     }
 
-    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}`
-          })
+    for (let [variantName, state] of pseudoVariants) {
+      addVariant(`group-${variantName}`, (ctx) => {
+        let result = typeof state === 'function' ? state(ctx) : state
 
-          if (variantSelector === selector) {
-            return null
-          }
+        return result.replace(/&(\S+)/, ':merge(.group)$1 &')
+      })
+    }
 
-          return applyStateToMarker(variantSelector, peerMarker, state, (marker, selector) =>
-            selector.trim().startsWith('~') ? `${marker}${selector}` : `${marker} ~ ${selector}`
-          )
-        })
-      )
+    for (let [variantName, state] of pseudoVariants) {
+      addVariant(`peer-${variantName}`, (ctx) => {
+        let result = typeof state === 'function' ? state(ctx) : state
+
+        return result.replace(/&(\S+)/, ':merge(.peer)$1 ~ &')
+      })
     }
   },
 
-  directionVariants: ({ config, addVariant }) => {
-    addVariant(
-      'ltr',
-      transformAllSelectors(
-        (selector) =>
-          `[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) =>
-          `[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 }) => {
-    let mode = config('darkMode', 'media')
+    let [mode, className = '.dark'] = [].concat(config('darkMode', 'media'))
+
     if (mode === false) {
       mode = 'media'
-      log.warn([
-        '`darkMode` is set to `false` in your config.',
-        'This will behave just like the `media` value.',
+      log.warn('darkmode-false', [
+        'The `darkMode` option in your Tailwind CSS configuration is set to `false`, which now behaves the same as `media`.',
+        'Change `darkMode` to `media` or remove it entirely.',
+        'https://tailwindcss.com/docs/upgrade-guide#remove-dark-mode-configuration',
       ])
     }
 
     if (mode === 'class') {
-      addVariant(
-        'dark',
-        transformAllSelectors((selector) => {
-          let variantSelector = updateLastClasses(selector, (className) => {
-            return `dark${config('separator')}${className}`
-          })
+      addVariant('dark', `${className} &`)
+    } else if (mode === 'media') {
+      addVariant('dark', '@media (prefers-color-scheme: dark)')
+    }
+  },
 
-          if (variantSelector === selector) {
-            return null
-          }
+  printVariant: ({ addVariant }) => {
+    addVariant('print', '@media print')
+  },
 
-          let darkSelector = prefixSelector(config('prefix'), `.dark`)
+  screenVariants: ({ theme, addVariant }) => {
+    for (let screen of normalizeScreens(theme('screens'))) {
+      let query = buildMediaQuery(screen)
 
-          return `${darkSelector} ${variantSelector}`
-        })
-      )
-    } else if (mode === 'media') {
-      addVariant(
-        'dark',
-        transformLastClasses(
-          (className) => {
-            return `dark${config('separator')}${className}`
-          },
-          {
-            wrap: () =>
-              postcss.atRule({
-                name: 'media',
-                params: '(prefers-color-scheme: dark)',
-              }),
-          }
-        )
-      )
+      addVariant(screen.name, `@media ${query}`)
     }
   },
 
-  screenVariants: ({ config, theme, addVariant }) => {
-    for (let screen in theme('screens')) {
-      let size = theme('screens')[screen]
-      let query = buildMediaQuery(size)
+  orientationVariants: ({ addVariant }) => {
+    addVariant('portrait', '@media (orientation: portrait)')
+    addVariant('landscape', '@media (orientation: landscape)')
+  },
 
-      addVariant(
-        screen,
-        transformLastClasses(
-          (className) => {
-            return `${screen}${config('separator')}${className}`
-          },
-          { wrap: () => postcss.atRule({ name: 'media', params: query }) }
-        )
-      )
-    }
+  prefersContrastVariants: ({ addVariant }) => {
+    addVariant('contrast-more', '@media (prefers-contrast: more)')
+    addVariant('contrast-less', '@media (prefers-contrast: less)')
   },
+}
 
-  // Actual plugins
+let cssTransformValue = [
+  'translate(var(--tw-translate-x), var(--tw-translate-y))',
+  'rotate(var(--tw-rotate))',
+  'skewX(var(--tw-skew-x))',
+  'skewY(var(--tw-skew-y))',
+  'scaleX(var(--tw-scale-x))',
+  'scaleY(var(--tw-scale-y))',
+].join(' ')
+
+let cssFilterValue = [
+  'var(--tw-blur)',
+  'var(--tw-brightness)',
+  'var(--tw-contrast)',
+  'var(--tw-grayscale)',
+  'var(--tw-hue-rotate)',
+  'var(--tw-invert)',
+  'var(--tw-saturate)',
+  'var(--tw-sepia)',
+  'var(--tw-drop-shadow)',
+].join(' ')
+
+let cssBackdropFilterValue = [
+  'var(--tw-backdrop-blur)',
+  'var(--tw-backdrop-brightness)',
+  'var(--tw-backdrop-contrast)',
+  'var(--tw-backdrop-grayscale)',
+  'var(--tw-backdrop-hue-rotate)',
+  'var(--tw-backdrop-invert)',
+  'var(--tw-backdrop-opacity)',
+  'var(--tw-backdrop-saturate)',
+  'var(--tw-backdrop-sepia)',
+].join(' ')
+
+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({
@@ -368,24 +270,10 @@ export default {
   },
 
   container: (() => {
-    function extractMinWidths(breakpoints) {
-      return Object.values(breakpoints ?? {}).flatMap((breakpoints) => {
-        if (typeof breakpoints === 'string') {
-          breakpoints = { min: breakpoints }
-        }
-
-        if (!Array.isArray(breakpoints)) {
-          breakpoints = [breakpoints]
-        }
-
-        return breakpoints
-          .filter((breakpoint) => {
-            return breakpoint?.hasOwnProperty?.('min') || breakpoint?.hasOwnProperty('min-width')
-          })
-          .map((breakpoint) => {
-            return breakpoint['min-width'] ?? breakpoint.min
-          })
-      })
+    function extractMinWidths(breakpoints = []) {
+      return breakpoints
+        .flatMap((breakpoint) => breakpoint.values.map((breakpoint) => breakpoint.min))
+        .filter((v) => v !== undefined)
     }
 
     function mapMinWidthsToPadding(minWidths, screens, paddings) {
@@ -414,16 +302,11 @@ export default {
       }
 
       for (let minWidth of minWidths) {
-        for (let [screen, value] of Object.entries(screens)) {
-          let screenMinWidth =
-            typeof value === 'object' && value !== null ? value.min || value['min-width'] : value
-
-          if (`${screenMinWidth}` === `${minWidth}`) {
-            mapping.push({
-              screen,
-              minWidth,
-              padding: paddings[screen],
-            })
+        for (let screen of screens) {
+          for (let { min } of screen.values) {
+            if (min === minWidth) {
+              mapping.push({ minWidth, padding: paddings[screen.name] })
+            }
           }
         }
       }
@@ -432,12 +315,12 @@ export default {
     }
 
     return function ({ addComponents, theme }) {
-      let screens = theme('container.screens', theme('screens'))
+      let screens = normalizeScreens(theme('container.screens', theme('screens')))
       let minWidths = extractMinWidths(screens)
       let paddings = mapMinWidthsToPadding(minWidths, screens, theme('container.padding'))
 
       let generatePaddingFor = (minWidth) => {
-        let paddingConfig = paddings.find((padding) => `${padding.minWidth}` === `${minWidth}`)
+        let paddingConfig = paddings.find((padding) => padding.minWidth === minWidth)
 
         if (!paddingConfig) {
           return {}
@@ -523,19 +406,23 @@ export default {
     })
   },
 
-  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({
@@ -544,8 +431,8 @@ export default {
     })
   },
 
-  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']]]),
@@ -570,19 +457,23 @@ export default {
     })
   },
 
-  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({
@@ -628,8 +519,15 @@ export default {
   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({
@@ -645,133 +543,151 @@ export default {
     })
   },
 
+  borderSpacing: ({ addDefaults, matchUtilities, theme }) => {
+    addDefaults('border-spacing', {
+      '--tw-border-spacing-x': 0,
+      '--tw-border-spacing-y': 0,
+    })
+
+    matchUtilities(
+      {
+        'border-spacing': (value) => {
+          return {
+            '--tw-border-spacing-x': value,
+            '--tw-border-spacing-y': value,
+            '@defaults border-spacing': {},
+            'border-spacing': 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)',
+          }
+        },
+        'border-spacing-x': (value) => {
+          return {
+            '--tw-border-spacing-x': value,
+            '@defaults border-spacing': {},
+            'border-spacing': 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)',
+          }
+        },
+        'border-spacing-y': (value) => {
+          return {
+            '--tw-border-spacing-y': value,
+            '@defaults border-spacing': {},
+            'border-spacing': 'var(--tw-border-spacing-x) var(--tw-border-spacing-y)',
+          }
+        },
+      },
+      { values: theme('borderSpacing') }
+    )
+  },
+
   transformOrigin: createUtilityPlugin('transformOrigin', [['origin', ['transformOrigin']]]),
-  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)']],
-      ],
-    ],
-  ]),
-  rotate: createUtilityPlugin('rotate', [
-    ['rotate', [['@defaults transform', {}], '--tw-rotate', ['transform', 'var(--tw-transform)']]],
-  ]),
-  skew: createUtilityPlugin('skew', [
+  translate: createUtilityPlugin(
+    'translate',
     [
       [
-        'skew-x',
-        [['@defaults transform', {}], '--tw-skew-x', ['transform', 'var(--tw-transform)']],
-      ],
-      [
-        'skew-y',
-        [['@defaults transform', {}], '--tw-skew-y', ['transform', 'var(--tw-transform)']],
+        [
+          'translate-x',
+          [['@defaults transform', {}], '--tw-translate-x', ['transform', cssTransformValue]],
+        ],
+        [
+          'translate-y',
+          [['@defaults transform', {}], '--tw-translate-y', ['transform', cssTransformValue]],
+        ],
       ],
     ],
-  ]),
-  scale: createUtilityPlugin('scale', [
+    { supportsNegativeValues: true }
+  ),
+  rotate: createUtilityPlugin(
+    'rotate',
+    [['rotate', [['@defaults transform', {}], '--tw-rotate', ['transform', cssTransformValue]]]],
+    { supportsNegativeValues: true }
+  ),
+  skew: createUtilityPlugin(
+    'skew',
     [
-      'scale',
       [
-        ['@defaults transform', {}],
-        '--tw-scale-x',
-        '--tw-scale-y',
-        ['transform', 'var(--tw-transform)'],
+        ['skew-x', [['@defaults transform', {}], '--tw-skew-x', ['transform', cssTransformValue]]],
+        ['skew-y', [['@defaults transform', {}], '--tw-skew-y', ['transform', cssTransformValue]]],
       ],
     ],
+    { supportsNegativeValues: true }
+  ),
+  scale: createUtilityPlugin(
+    'scale',
     [
       [
-        'scale-x',
-        [['@defaults transform', {}], '--tw-scale-x', ['transform', 'var(--tw-transform)']],
+        'scale',
+        [
+          ['@defaults transform', {}],
+          '--tw-scale-x',
+          '--tw-scale-y',
+          ['transform', cssTransformValue],
+        ],
       ],
       [
-        'scale-y',
-        [['@defaults transform', {}], '--tw-scale-y', ['transform', 'var(--tw-transform)']],
+        [
+          'scale-x',
+          [['@defaults transform', {}], '--tw-scale-x', ['transform', cssTransformValue]],
+        ],
+        [
+          'scale-y',
+          [['@defaults transform', {}], '--tw-scale-y', ['transform', cssTransformValue]],
+        ],
       ],
     ],
-  ]),
+    { supportsNegativeValues: true }
+  ),
 
-  transform: ({ addBase, addUtilities }) => {
-    addBase({
-      '@defaults transform': {
-        '--tw-translate-x': '0',
-        '--tw-translate-y': '0',
-        '--tw-rotate': '0',
-        '--tw-skew-x': '0',
-        '--tw-skew-y': '0',
-        '--tw-scale-x': '1',
-        '--tw-scale-y': '1',
-        '--tw-transform': [
-          'translateX(var(--tw-translate-x))',
-          'translateY(var(--tw-translate-y))',
-          'rotate(var(--tw-rotate))',
-          'skewX(var(--tw-skew-x))',
-          'skewY(var(--tw-skew-y))',
-          'scaleX(var(--tw-scale-x))',
-          'scaleY(var(--tw-scale-y))',
-        ].join(' '),
-      },
-    })
-    addUtilities({
-      '.transform': { '@defaults transform': {}, transform: 'var(--tw-transform)' },
+  transform: ({ addDefaults, addUtilities }) => {
+    addDefaults('transform', {
+      '--tw-translate-x': '0',
+      '--tw-translate-y': '0',
+      '--tw-rotate': '0',
+      '--tw-skew-x': '0',
+      '--tw-skew-y': '0',
+      '--tw-scale-x': '1',
+      '--tw-scale-y': '1',
+    })
+
+    addUtilities({
+      '.transform': { '@defaults transform': {}, transform: cssTransformValue },
       '.transform-cpu': {
-        '--tw-transform': [
-          'translateX(var(--tw-translate-x))',
-          'translateY(var(--tw-translate-y))',
-          'rotate(var(--tw-rotate))',
-          'skewX(var(--tw-skew-x))',
-          'skewY(var(--tw-skew-y))',
-          'scaleX(var(--tw-scale-x))',
-          'scaleY(var(--tw-scale-y))',
-        ].join(' '),
+        transform: cssTransformValue,
       },
       '.transform-gpu': {
-        '--tw-transform': [
-          'translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)',
-          'rotate(var(--tw-rotate))',
-          'skewX(var(--tw-skew-x))',
-          'skewY(var(--tw-skew-y))',
-          'scaleX(var(--tw-scale-x))',
-          'scaleY(var(--tw-scale-y))',
-        ].join(' '),
+        transform: cssTransformValue.replace(
+          'translate(var(--tw-translate-x), var(--tw-translate-y))',
+          'translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)'
+        ),
       },
       '.transform-none': { transform: 'none' },
     })
   },
 
-  animation: ({ matchUtilities, theme, prefix }) => {
-    let prefixName = (name) => prefix(`.${name}`).slice(1)
+  animation: ({ matchUtilities, theme, config }) => {
+    let prefixName = (name) => `${config('prefix')}${escapeClassName(name)}`
     let keyframes = Object.fromEntries(
       Object.entries(theme('keyframes') ?? {}).map(([key, value]) => {
-        return [key, [{ [`@keyframes ${prefixName(key)}`]: value }]]
+        return [key, { [`@keyframes ${prefixName(key)}`]: value }]
       })
     )
 
     matchUtilities(
       {
-        animate: (value, { includeRules }) => {
+        animate: (value) => {
           let animations = parseAnimationValue(value)
 
-          for (let { name } of animations) {
-            if (keyframes[name] !== undefined) {
-              includeRules(keyframes[name], { respectImportant: false })
-            }
-          }
-
-          return {
-            animation: animations
-              .map(({ name, value }) => {
-                if (name === undefined || keyframes[name] === undefined) {
-                  return value
-                }
-                return value.replace(name, prefixName(name))
-              })
-              .join(', '),
-          }
+          return [
+            ...animations.flatMap((animation) => keyframes[animation.name]),
+            {
+              animation: animations
+                .map(({ name, value }) => {
+                  if (name === undefined || keyframes[name] === undefined) {
+                    return value
+                  }
+                  return value.replace(name, prefixName(name))
+                })
+                .join(', '),
+            },
+          ]
         },
       },
       { values: theme('animation') }
@@ -780,17 +696,53 @@ export default {
 
   cursor: createUtilityPlugin('cursor'),
 
-  touchAction: ({ addUtilities }) => {
+  touchAction: ({ addDefaults, addUtilities }) => {
+    addDefaults('touch-action', {
+      '--tw-pan-x': ' ',
+      '--tw-pan-y': ' ',
+      '--tw-pinch-zoom': ' ',
+    })
+
+    let cssTouchActionValue = 'var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)'
+
     addUtilities({
       '.touch-auto': { 'touch-action': 'auto' },
       '.touch-none': { 'touch-action': 'none' },
-      '.touch-pan-x': { 'touch-action': 'pan-x' },
-      '.touch-pan-left': { 'touch-action': 'pan-left' },
-      '.touch-pan-right': { 'touch-action': 'pan-right' },
-      '.touch-pan-y': { 'touch-action': 'pan-y' },
-      '.touch-pan-up': { 'touch-action': 'pan-up' },
-      '.touch-pan-down': { 'touch-action': 'pan-down' },
-      '.touch-pinch-zoom': { 'touch-action': 'pinch-zoom' },
+      '.touch-pan-x': {
+        '@defaults touch-action': {},
+        '--tw-pan-x': 'pan-x',
+        'touch-action': cssTouchActionValue,
+      },
+      '.touch-pan-left': {
+        '@defaults touch-action': {},
+        '--tw-pan-x': 'pan-left',
+        'touch-action': cssTouchActionValue,
+      },
+      '.touch-pan-right': {
+        '@defaults touch-action': {},
+        '--tw-pan-x': 'pan-right',
+        'touch-action': cssTouchActionValue,
+      },
+      '.touch-pan-y': {
+        '@defaults touch-action': {},
+        '--tw-pan-y': 'pan-y',
+        'touch-action': cssTouchActionValue,
+      },
+      '.touch-pan-up': {
+        '@defaults touch-action': {},
+        '--tw-pan-y': 'pan-up',
+        'touch-action': cssTouchActionValue,
+      },
+      '.touch-pan-down': {
+        '@defaults touch-action': {},
+        '--tw-pan-y': 'pan-down',
+        'touch-action': cssTouchActionValue,
+      },
+      '.touch-pinch-zoom': {
+        '@defaults touch-action': {},
+        '--tw-pinch-zoom': 'pinch-zoom',
+        'touch-action': cssTouchActionValue,
+      },
       '.touch-manipulation': { 'touch-action': 'manipulation' },
     })
   },
@@ -813,11 +765,9 @@ export default {
     })
   },
 
-  scrollSnapType: ({ addUtilities, addBase }) => {
-    addBase({
-      '@defaults scroll-snap-type': {
-        '--tw-scroll-snap-strictness': 'proximity',
-      },
+  scrollSnapType: ({ addDefaults, addUtilities }) => {
+    addDefaults('scroll-snap-type', {
+      '--tw-scroll-snap-strictness': 'proximity',
     })
 
     addUtilities({
@@ -855,19 +805,23 @@ export default {
     })
   },
 
-  scrollMargin: createUtilityPlugin('scrollMargin', [
-    ['scroll-m', ['scroll-margin']],
+  scrollMargin: createUtilityPlugin(
+    'scrollMargin',
     [
-      ['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']],
+      ['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']],
@@ -941,6 +895,7 @@ export default {
     addUtilities({
       '.grid-flow-row': { gridAutoFlow: 'row' },
       '.grid-flow-col': { gridAutoFlow: 'column' },
+      '.grid-flow-dense': { gridAutoFlow: 'dense' },
       '.grid-flow-row-dense': { gridAutoFlow: 'row dense' },
       '.grid-flow-col-dense': { gridAutoFlow: 'column dense' },
     })
@@ -1065,7 +1020,7 @@ export default {
           }
         },
       },
-      { values: theme('space') }
+      { values: theme('space'), supportsNegativeValues: true }
     )
 
     addUtilities({
@@ -1310,24 +1265,7 @@ export default {
     })
   },
 
-  borderColor: ({ addBase, matchUtilities, theme, corePlugins }) => {
-    if (!corePlugins('borderOpacity')) {
-      let value = theme('borderColor.DEFAULT', 'currentColor')
-      addBase({
-        '@defaults border-width': {
-          'border-color': toColorValue(value),
-        },
-      })
-    } else {
-      addBase({
-        '@defaults border-width': withAlphaVariable({
-          color: theme('borderColor.DEFAULT', 'currentColor'),
-          property: 'border-color',
-          variable: '--tw-border-opacity',
-        }),
-      })
-    }
-
+  borderColor: ({ matchUtilities, theme, corePlugins }) => {
     matchUtilities(
       {
         border: (value) => {
@@ -1528,8 +1466,10 @@ export default {
 
   boxDecorationBreak: ({ addUtilities }) => {
     addUtilities({
-      '.decoration-slice': { 'box-decoration-break': 'slice' },
-      '.decoration-clone': { 'box-decoration-break': 'clone' },
+      '.decoration-slice': { 'box-decoration-break': 'slice' }, // Deprecated
+      '.decoration-clone': { 'box-decoration-break': 'clone' }, // Deprecated
+      '.box-decoration-slice': { 'box-decoration-break': 'slice' },
+      '.box-decoration-clone': { 'box-decoration-break': 'clone' },
     })
   },
 
@@ -1634,10 +1574,14 @@ export default {
       '.text-center': { 'text-align': 'center' },
       '.text-right': { 'text-align': 'right' },
       '.text-justify': { 'text-align': 'justify' },
+      '.text-start': { 'text-align': 'start' },
+      '.text-end': { 'text-align': 'end' },
     })
   },
 
-  textIndent: createUtilityPlugin('textIndent', [['indent', ['text-indent']]]),
+  textIndent: createUtilityPlugin('textIndent', [['indent', ['text-indent']]], {
+    supportsNegativeValues: true,
+  }),
 
   verticalAlign: ({ addUtilities, matchUtilities }) => {
     addUtilities({
@@ -1701,32 +1645,67 @@ export default {
     })
   },
 
-  fontVariantNumeric: ({ addUtilities }) => {
+  fontVariantNumeric: ({ addDefaults, addUtilities }) => {
+    let cssFontVariantNumericValue =
+      'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)'
+
+    addDefaults('font-variant-numeric', {
+      '--tw-ordinal': ' ',
+      '--tw-slashed-zero': ' ',
+      '--tw-numeric-figure': ' ',
+      '--tw-numeric-spacing': ' ',
+      '--tw-numeric-fraction': ' ',
+    })
+
     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)',
-        },
       '.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': cssFontVariantNumericValue,
+      },
+      '.slashed-zero': {
+        '@defaults font-variant-numeric': {},
+        '--tw-slashed-zero': 'slashed-zero',
+        'font-variant-numeric': cssFontVariantNumericValue,
+      },
+      '.lining-nums': {
+        '@defaults font-variant-numeric': {},
+        '--tw-numeric-figure': 'lining-nums',
+        'font-variant-numeric': cssFontVariantNumericValue,
+      },
+      '.oldstyle-nums': {
+        '@defaults font-variant-numeric': {},
+        '--tw-numeric-figure': 'oldstyle-nums',
+        'font-variant-numeric': cssFontVariantNumericValue,
+      },
+      '.proportional-nums': {
+        '@defaults font-variant-numeric': {},
+        '--tw-numeric-spacing': 'proportional-nums',
+        'font-variant-numeric': cssFontVariantNumericValue,
+      },
+      '.tabular-nums': {
+        '@defaults font-variant-numeric': {},
+        '--tw-numeric-spacing': 'tabular-nums',
+        'font-variant-numeric': cssFontVariantNumericValue,
+      },
+      '.diagonal-fractions': {
+        '@defaults font-variant-numeric': {},
+        '--tw-numeric-fraction': 'diagonal-fractions',
+        'font-variant-numeric': cssFontVariantNumericValue,
+      },
+      '.stacked-fractions': {
+        '@defaults font-variant-numeric': {},
+        '--tw-numeric-fraction': 'stacked-fractions',
+        'font-variant-numeric': cssFontVariantNumericValue,
+      },
     })
   },
 
   lineHeight: createUtilityPlugin('lineHeight', [['leading', ['lineHeight']]]),
-  letterSpacing: createUtilityPlugin('letterSpacing', [['tracking', ['letterSpacing']]]),
+  letterSpacing: createUtilityPlugin('letterSpacing', [['tracking', ['letterSpacing']]], {
+    supportsNegativeValues: true,
+  }),
 
   textColor: ({ matchUtilities, theme, corePlugins }) => {
     matchUtilities(
@@ -1751,12 +1730,46 @@ export default {
 
   textDecoration: ({ addUtilities }) => {
     addUtilities({
-      '.underline': { 'text-decoration': 'underline' },
-      '.line-through': { 'text-decoration': 'line-through' },
-      '.no-underline': { 'text-decoration': 'none' },
+      '.underline': { 'text-decoration-line': 'underline' },
+      '.overline': { 'text-decoration-line': 'overline' },
+      '.line-through': { 'text-decoration-line': 'line-through' },
+      '.no-underline': { 'text-decoration-line': 'none' },
     })
   },
 
+  textDecorationColor: ({ matchUtilities, theme }) => {
+    matchUtilities(
+      {
+        decoration: (value) => {
+          return { 'text-decoration-color': toColorValue(value) }
+        },
+      },
+      { values: flattenColorPalette(theme('textDecorationColor')), type: ['color'] }
+    )
+  },
+
+  textDecorationStyle: ({ addUtilities }) => {
+    addUtilities({
+      '.decoration-solid': { 'text-decoration-style': 'solid' },
+      '.decoration-double': { 'text-decoration-style': 'double' },
+      '.decoration-dotted': { 'text-decoration-style': 'dotted' },
+      '.decoration-dashed': { 'text-decoration-style': 'dashed' },
+      '.decoration-wavy': { 'text-decoration-style': 'wavy' },
+    })
+  },
+
+  textDecorationThickness: createUtilityPlugin(
+    'textDecorationThickness',
+    [['decoration', ['text-decoration-thickness']]],
+    { type: ['length', 'percentage'] }
+  ),
+
+  textUnderlineOffset: createUtilityPlugin(
+    'textUnderlineOffset',
+    [['underline-offset', ['text-underline-offset']]],
+    { type: ['length', 'percentage'] }
+  ),
+
   fontSmoothing: ({ addUtilities }) => {
     addUtilities({
       '.antialiased': {
@@ -1869,6 +1882,7 @@ export default {
       '.mix-blend-saturation': { 'mix-blend-mode': 'saturation' },
       '.mix-blend-color': { 'mix-blend-mode': 'color' },
       '.mix-blend-luminosity': { 'mix-blend-mode': 'luminosity' },
+      '.mix-blend-plus-lighter': { 'mix-blend-mode': 'plus-lighter' },
     })
   },
 
@@ -1880,13 +1894,12 @@ export default {
       `var(--tw-shadow)`,
     ].join(', ')
 
-    return function ({ matchUtilities, addBase, theme }) {
-      addBase({
-        '@defaults box-shadow': {
-          '--tw-ring-offset-shadow': '0 0 #0000',
-          '--tw-ring-shadow': '0 0 #0000',
-          '--tw-shadow': '0 0 #0000',
-        },
+    return function ({ matchUtilities, addDefaults, theme }) {
+      addDefaults(' box-shadow', {
+        '--tw-ring-offset-shadow': '0 0 #0000',
+        '--tw-ring-shadow': '0 0 #0000',
+        '--tw-shadow': '0 0 #0000',
+        '--tw-shadow-colored': '0 0 #0000',
       })
 
       matchUtilities(
@@ -1894,50 +1907,100 @@ export default {
           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]
-
-          return { outline, 'outline-offset': outlineOffset }
+        shadow: (value) => {
+          return {
+            '--tw-shadow-color': toColorValue(value),
+            '--tw-shadow': 'var(--tw-shadow-colored)',
+          }
         },
       },
-      { values: theme('outline') }
+      { values: flattenColorPalette(theme('boxShadowColor')), type: ['color'] }
     )
   },
 
-  ringWidth: ({ matchUtilities, addBase, addUtilities, theme }) => {
-    let ringOpacityDefault = theme('ringOpacity.DEFAULT', '0.5')
-    let ringColorDefault = withAlphaValue(
-      theme('ringColor.DEFAULT'),
-      ringOpacityDefault,
-      `rgb(147 197 253 / ${ringOpacityDefault})`
-    )
+  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' },
+    })
+  },
 
-    addBase({
-      '@defaults ring-width': {
-        '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-ring-offset-width': theme('ringOffsetWidth.DEFAULT', '0px'),
-        '--tw-ring-offset-color': theme('ringOffsetColor.DEFAULT', '#fff'),
-        '--tw-ring-color': ringColorDefault,
-        '--tw-ring-offset-shadow': '0 0 #0000',
-        '--tw-ring-shadow': '0 0 #0000',
-        '--tw-shadow': '0 0 #0000',
+  outlineWidth: createUtilityPlugin('outlineWidth', [['outline', ['outline-width']]], {
+    type: ['length', 'number', 'percentage'],
+  }),
+
+  outlineOffset: createUtilityPlugin('outlineOffset', [['outline-offset', ['outline-offset']]], {
+    type: ['length', 'number', 'percentage'],
+  }),
+
+  outlineColor: ({ matchUtilities, theme }) => {
+    matchUtilities(
+      {
+        outline: (value) => {
+          return { 'outline-color': toColorValue(value) }
+        },
       },
+      { values: flattenColorPalette(theme('outlineColor')), type: ['color'] }
+    )
+  },
+
+  ringWidth: ({ matchUtilities, addDefaults, addUtilities, theme, config }) => {
+    let ringColorDefault = (() => {
+      if (flagEnabled(config(), 'respectDefaultRingColorOpacity')) {
+        return theme('ringColor.DEFAULT')
+      }
+
+      let ringOpacityDefault = theme('ringOpacity.DEFAULT', '0.5')
+
+      return withAlphaValue(
+        theme('ringColor')?.DEFAULT,
+        ringOpacityDefault,
+        `rgb(147 197 253 / ${ringOpacityDefault})`
+      )
+    })()
+
+    addDefaults('ring-width', {
+      '--tw-ring-inset': ' ',
+      '--tw-ring-offset-width': theme('ringOffsetWidth.DEFAULT', '0px'),
+      '--tw-ring-offset-color': theme('ringOffsetColor.DEFAULT', '#fff'),
+      '--tw-ring-color': ringColorDefault,
+      '--tw-ring-offset-shadow': '0 0 #0000',
+      '--tw-ring-shadow': '0 0 #0000',
+      '--tw-shadow': '0 0 #0000',
+      '--tw-shadow-colored': '0 0 #0000',
     })
 
     matchUtilities(
@@ -1963,10 +2026,16 @@ export default {
     })
   },
 
-  ringColor: ({ matchUtilities, theme }) => {
+  ringColor: ({ matchUtilities, theme, corePlugins }) => {
     matchUtilities(
       {
         ring: (value) => {
+          if (!corePlugins('ringOpacity')) {
+            return {
+              '--tw-ring-color': toColorValue(value),
+            }
+          }
+
           return withAlphaVariable({
             color: value,
             property: '--tw-ring-color',
@@ -2014,7 +2083,7 @@ export default {
           return {
             '--tw-blur': `blur(${value})`,
             '@defaults filter': {},
-            filter: 'var(--tw-filter)',
+            filter: cssFilterValue,
           }
         },
       },
@@ -2029,7 +2098,7 @@ export default {
           return {
             '--tw-brightness': `brightness(${value})`,
             '@defaults filter': {},
-            filter: 'var(--tw-filter)',
+            filter: cssFilterValue,
           }
         },
       },
@@ -2044,7 +2113,7 @@ export default {
           return {
             '--tw-contrast': `contrast(${value})`,
             '@defaults filter': {},
-            filter: 'var(--tw-filter)',
+            filter: cssFilterValue,
           }
         },
       },
@@ -2061,7 +2130,7 @@ export default {
               ? value.map((v) => `drop-shadow(${v})`).join(' ')
               : `drop-shadow(${value})`,
             '@defaults filter': {},
-            filter: 'var(--tw-filter)',
+            filter: cssFilterValue,
           }
         },
       },
@@ -2076,7 +2145,7 @@ export default {
           return {
             '--tw-grayscale': `grayscale(${value})`,
             '@defaults filter': {},
-            filter: 'var(--tw-filter)',
+            filter: cssFilterValue,
           }
         },
       },
@@ -2091,11 +2160,11 @@ export default {
           return {
             '--tw-hue-rotate': `hue-rotate(${value})`,
             '@defaults filter': {},
-            filter: 'var(--tw-filter)',
+            filter: cssFilterValue,
           }
         },
       },
-      { values: theme('hueRotate') }
+      { values: theme('hueRotate'), supportsNegativeValues: true }
     )
   },
 
@@ -2106,7 +2175,7 @@ export default {
           return {
             '--tw-invert': `invert(${value})`,
             '@defaults filter': {},
-            filter: 'var(--tw-filter)',
+            filter: cssFilterValue,
           }
         },
       },
@@ -2121,7 +2190,7 @@ export default {
           return {
             '--tw-saturate': `saturate(${value})`,
             '@defaults filter': {},
-            filter: 'var(--tw-filter)',
+            filter: cssFilterValue,
           }
         },
       },
@@ -2136,7 +2205,7 @@ export default {
           return {
             '--tw-sepia': `sepia(${value})`,
             '@defaults filter': {},
-            filter: 'var(--tw-filter)',
+            filter: cssFilterValue,
           }
         },
       },
@@ -2144,33 +2213,20 @@ export default {
     )
   },
 
-  filter: ({ addBase, addUtilities }) => {
-    addBase({
-      '@defaults filter': {
-        '--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-invert': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-drop-shadow': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-filter': [
-          'var(--tw-blur)',
-          'var(--tw-brightness)',
-          'var(--tw-contrast)',
-          'var(--tw-grayscale)',
-          'var(--tw-hue-rotate)',
-          'var(--tw-invert)',
-          'var(--tw-saturate)',
-          'var(--tw-sepia)',
-          'var(--tw-drop-shadow)',
-        ].join(' '),
-      },
-    })
-    addUtilities({
-      '.filter': { '@defaults filter': {}, filter: 'var(--tw-filter)' },
+  filter: ({ addDefaults, addUtilities }) => {
+    addDefaults('filter', {
+      '--tw-blur': ' ',
+      '--tw-brightness': ' ',
+      '--tw-contrast': ' ',
+      '--tw-grayscale': ' ',
+      '--tw-hue-rotate': ' ',
+      '--tw-invert': ' ',
+      '--tw-saturate': ' ',
+      '--tw-sepia': ' ',
+      '--tw-drop-shadow': ' ',
+    })
+    addUtilities({
+      '.filter': { '@defaults filter': {}, filter: cssFilterValue },
       '.filter-none': { filter: 'none' },
     })
   },
@@ -2182,7 +2238,7 @@ export default {
           return {
             '--tw-backdrop-blur': `blur(${value})`,
             '@defaults backdrop-filter': {},
-            'backdrop-filter': 'var(--tw-backdrop-filter)',
+            'backdrop-filter': cssBackdropFilterValue,
           }
         },
       },
@@ -2197,7 +2253,7 @@ export default {
           return {
             '--tw-backdrop-brightness': `brightness(${value})`,
             '@defaults backdrop-filter': {},
-            'backdrop-filter': 'var(--tw-backdrop-filter)',
+            'backdrop-filter': cssBackdropFilterValue,
           }
         },
       },
@@ -2212,7 +2268,7 @@ export default {
           return {
             '--tw-backdrop-contrast': `contrast(${value})`,
             '@defaults backdrop-filter': {},
-            'backdrop-filter': 'var(--tw-backdrop-filter)',
+            'backdrop-filter': cssBackdropFilterValue,
           }
         },
       },
@@ -2227,7 +2283,7 @@ export default {
           return {
             '--tw-backdrop-grayscale': `grayscale(${value})`,
             '@defaults backdrop-filter': {},
-            'backdrop-filter': 'var(--tw-backdrop-filter)',
+            'backdrop-filter': cssBackdropFilterValue,
           }
         },
       },
@@ -2242,11 +2298,11 @@ export default {
           return {
             '--tw-backdrop-hue-rotate': `hue-rotate(${value})`,
             '@defaults backdrop-filter': {},
-            'backdrop-filter': 'var(--tw-backdrop-filter)',
+            'backdrop-filter': cssBackdropFilterValue,
           }
         },
       },
-      { values: theme('backdropHueRotate') }
+      { values: theme('backdropHueRotate'), supportsNegativeValues: true }
     )
   },
 
@@ -2257,7 +2313,7 @@ export default {
           return {
             '--tw-backdrop-invert': `invert(${value})`,
             '@defaults backdrop-filter': {},
-            'backdrop-filter': 'var(--tw-backdrop-filter)',
+            'backdrop-filter': cssBackdropFilterValue,
           }
         },
       },
@@ -2272,7 +2328,7 @@ export default {
           return {
             '--tw-backdrop-opacity': `opacity(${value})`,
             '@defaults backdrop-filter': {},
-            'backdrop-filter': 'var(--tw-backdrop-filter)',
+            'backdrop-filter': cssBackdropFilterValue,
           }
         },
       },
@@ -2287,7 +2343,7 @@ export default {
           return {
             '--tw-backdrop-saturate': `saturate(${value})`,
             '@defaults backdrop-filter': {},
-            'backdrop-filter': 'var(--tw-backdrop-filter)',
+            'backdrop-filter': cssBackdropFilterValue,
           }
         },
       },
@@ -2302,7 +2358,7 @@ export default {
           return {
             '--tw-backdrop-sepia': `sepia(${value})`,
             '@defaults backdrop-filter': {},
-            'backdrop-filter': 'var(--tw-backdrop-filter)',
+            'backdrop-filter': cssBackdropFilterValue,
           }
         },
       },
@@ -2310,35 +2366,22 @@ export default {
     )
   },
 
-  backdropFilter: ({ addBase, addUtilities }) => {
-    addBase({
-      '@defaults backdrop-filter': {
-        '--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-backdrop-grayscale': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-backdrop-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-backdrop-invert': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)',
-        '--tw-backdrop-filter': [
-          'var(--tw-backdrop-blur)',
-          'var(--tw-backdrop-brightness)',
-          'var(--tw-backdrop-contrast)',
-          'var(--tw-backdrop-grayscale)',
-          'var(--tw-backdrop-hue-rotate)',
-          'var(--tw-backdrop-invert)',
-          'var(--tw-backdrop-opacity)',
-          'var(--tw-backdrop-saturate)',
-          'var(--tw-backdrop-sepia)',
-        ].join(' '),
-      },
+  backdropFilter: ({ addDefaults, addUtilities }) => {
+    addDefaults('backdrop-filter', {
+      '--tw-backdrop-blur': ' ',
+      '--tw-backdrop-brightness': ' ',
+      '--tw-backdrop-contrast': ' ',
+      '--tw-backdrop-grayscale': ' ',
+      '--tw-backdrop-hue-rotate': ' ',
+      '--tw-backdrop-invert': ' ',
+      '--tw-backdrop-opacity': ' ',
+      '--tw-backdrop-saturate': ' ',
+      '--tw-backdrop-sepia': ' ',
     })
     addUtilities({
       '.backdrop-filter': {
         '@defaults backdrop-filter': {},
-        'backdrop-filter': 'var(--tw-backdrop-filter)',
+        'backdrop-filter': cssBackdropFilterValue,
       },
       '.backdrop-filter-none': { 'backdrop-filter': 'none' },
     })
@@ -2378,5 +2421,7 @@ export default {
     { filterDefault: true }
   ),
   willChange: createUtilityPlugin('willChange', [['will-change', ['will-change']]]),
-  content: createUtilityPlugin('content'),
+  content: createUtilityPlugin('content', [
+    ['content', ['--tw-content', ['content', 'var(--tw-content)']]],
+  ]),
 }