tailwindcss 0.0.0-insiders.bd4dddd → 0.0.0-insiders.bda8421

package/src/corePlugins.js

@@ -3,6 +3,7 @@ import * as path from 'path'
 import postcss from 'postcss'
 import createUtilityPlugin from './util/createUtilityPlugin'
 import buildMediaQuery from './util/buildMediaQuery'
+import escapeClassName from './util/escapeClassName'
 import parseAnimationValue from './util/parseAnimationValue'
 import flattenColorPalette from './util/flattenColorPalette'
 import withAlphaVariable, { withAlphaValue } from './util/withAlphaVariable'
@@ -11,21 +12,47 @@ import isPlainObject from './util/isPlainObject'
 import transformThemeValue from './util/transformThemeValue'
 import { version as tailwindVersion } from '../package.json'
 import log from './util/log'
-import { normalizeScreens } from './util/normalizeScreens'
+import {
+  normalizeScreens,
+  isScreenSortable,
+  compareScreens,
+  toScreen,
+} from './util/normalizeScreens'
 import { formatBoxShadowValue, parseBoxShadowValue } from './util/parseBoxShadowValue'
+import { removeAlphaVariables } from './util/removeAlphaVariables'
+import { flagEnabled } from './featureFlags'
+import { normalize } from './util/dataTypes'
+import { INTERNAL_FEATURES } from './lib/setupContextUtils'
 
 export let variantPlugins = {
+  childVariant: ({ addVariant }) => {
+    addVariant('*', '& > *')
+  },
   pseudoElementVariants: ({ addVariant }) => {
     addVariant('first-letter', '&::first-letter')
     addVariant('first-line', '&::first-line')
 
-    addVariant('marker', ['& *::marker', '&::marker'])
+    addVariant('marker', [
+      ({ container }) => {
+        removeAlphaVariables(container, ['--tw-text-opacity'])
+
+        return '& *::marker'
+      },
+      ({ container }) => {
+        removeAlphaVariables(container, ['--tw-text-opacity'])
+
+        return '&::marker'
+      },
+    ])
+
     addVariant('selection', ['& *::selection', '&::selection'])
 
     addVariant('file', '&::file-selector-button')
 
     addVariant('placeholder', '&::placeholder')
 
+    addVariant('backdrop', '&::backdrop')
+
     addVariant('before', ({ container }) => {
       container.walkRules((rule) => {
         let foundContent = false
@@ -57,22 +84,33 @@ export let variantPlugins = {
     })
   },
 
-  pseudoClassVariants: ({ addVariant }) => {
+  pseudoClassVariants: ({ addVariant, matchVariant, config, prefix }) => {
     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 }) => {
+          removeAlphaVariables(container, [
+            '--tw-text-opacity',
+            '--tw-border-opacity',
+            '--tw-bg-opacity',
+          ])
+
+          return '&:visited'
+        },
+      ],
       'target',
-      ['open', '[open]'],
+      ['open', '&[open]'],
 
       // Forms
       'default',
@@ -80,6 +118,7 @@ export let variantPlugins = {
       'indeterminate',
       'placeholder-shown',
       'autofill',
+      'optional',
       'required',
       'valid',
       'invalid',
@@ -92,44 +131,84 @@ export let variantPlugins = {
 
       // Interactive
       'focus-within',
-      'hover',
+      [
+        'hover',
+        !flagEnabled(config(), 'hoverOnlyWhenSupported')
+          ? '&:hover'
+          : '@media (hover: hover) and (pointer: fine) { &:hover }',
+      ],
       'focus',
       'focus-visible',
       'active',
+      'enabled',
       'disabled',
-    ].map((variant) => (Array.isArray(variant) ? variant : [variant, `:${variant}`]))
+    ].map((variant) => (Array.isArray(variant) ? variant : [variant, `&:${variant}`]))
 
     for (let [variantName, state] of pseudoVariants) {
-      addVariant(variantName, `&${state}`)
-    }
+      addVariant(variantName, (ctx) => {
+        let result = typeof state === 'function' ? state(ctx) : state
 
-    for (let [variantName, state] of pseudoVariants) {
-      addVariant(`group-${variantName}`, `:merge(.group)${state} &`)
+        return result
+      })
     }
 
-    for (let [variantName, state] of pseudoVariants) {
-      addVariant(`peer-${variantName}`, `:merge(.peer)${state} ~ &`)
+    let variants = {
+      group: (_, { modifier }) =>
+        modifier
+          ? [`:merge(${prefix('.group')}\\/${escapeClassName(modifier)})`, ' &']
+          : [`:merge(${prefix('.group')})`, ' &'],
+      peer: (_, { modifier }) =>
+        modifier
+          ? [`:merge(${prefix('.peer')}\\/${escapeClassName(modifier)})`, ' ~ &']
+          : [`:merge(${prefix('.peer')})`, ' ~ &'],
     }
-  },
 
-  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.',
-      ])
+    for (let [name, fn] of Object.entries(variants)) {
+      matchVariant(
+        name,
+        (value = '', extra) => {
+          let result = normalize(typeof value === 'function' ? value(extra) : value)
+          if (!result.includes('&')) result = '&' + result
+
+          let [a, b] = fn('', extra)
+
+          let start = null
+          let end = null
+          let quotes = 0
+
+          for (let i = 0; i < result.length; ++i) {
+            let c = result[i]
+            if (c === '&') {
+              start = i
+            } else if (c === "'" || c === '"') {
+              quotes += 1
+            } else if (start !== null && c === ' ' && !quotes) {
+              end = i
+            }
+          }
 
-      return '[dir="ltr"] &'
-    })
+          if (start !== null && end === null) {
+            end = result.length
+          }
 
-    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.',
-      ])
+          // Basically this but can handle quotes:
+          // result.replace(/&(\S+)?/g, (_, pseudo = '') => a + pseudo + b)
 
-      return '[dir="rtl"] &'
-    })
+          return result.slice(0, start) + a + result.slice(start + 1, end) + b + result.slice(end)
+        },
+        {
+          values: Object.fromEntries(pseudoVariants),
+          [INTERNAL_FEATURES]: {
+            respectPrefix: false,
+          },
+        }
+      )
+    }
+  },
+
+  directionVariants: ({ addVariant }) => {
+    addVariant('ltr', '&:where([dir="ltr"], [dir="ltr"] *)')
+    addVariant('rtl', '&:where([dir="rtl"], [dir="rtl"] *)')
   },
 
   reducedMotionVariants: ({ addVariant }) => {
@@ -138,19 +217,60 @@ export let variantPlugins = {
   },
 
   darkVariants: ({ config, addVariant }) => {
-    let mode = config('darkMode', 'media')
+    let [mode, selector = '.dark'] = [].concat(config('darkMode', 'media'))
+
     if (mode === false) {
       mode = 'media'
       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', '.dark &')
+    if (mode === 'variant') {
+      let formats
+      if (Array.isArray(selector)) {
+        formats = selector
+      } else if (typeof selector === 'function') {
+        formats = selector
+      } else if (typeof selector === 'string') {
+        formats = [selector]
+      }
+
+      // TODO: We could also add these warnings if the user passes a function that returns string | string[]
+      // But this is an advanced enough use case that it's probably not necessary
+      if (Array.isArray(formats)) {
+        for (let format of formats) {
+          if (format === '.dark') {
+            mode = false
+            log.warn('darkmode-variant-without-selector', [
+              'When using `variant` for `darkMode`, you must provide a selector.',
+              'Example: `darkMode: ["variant", ".your-selector &"]`',
+            ])
+          } else if (!format.includes('&')) {
+            mode = false
+            log.warn('darkmode-variant-without-ampersand', [
+              'When using `variant` for `darkMode`, your selector must contain `&`.',
+              'Example `darkMode: ["variant", ".your-selector &"]`',
+            ])
+          }
+        }
+      }
+
+      selector = formats
+    }
+
+    if (mode === 'selector') {
+      // New preferred behavior
+      addVariant('dark', `&:where(${selector}, ${selector} *)`)
     } else if (mode === 'media') {
       addVariant('dark', '@media (prefers-color-scheme: dark)')
+    } else if (mode === 'variant') {
+      addVariant('dark', selector)
+    } else if (mode === 'class') {
+      // Old behavior
+      addVariant('dark', `:is(${selector} &)`)
     }
   },
 
@@ -158,20 +278,270 @@ export let variantPlugins = {
     addVariant('print', '@media print')
   },
 
-  screenVariants: ({ theme, addVariant }) => {
-    for (let screen of normalizeScreens(theme('screens'))) {
-      let query = buildMediaQuery(screen)
+  screenVariants: ({ theme, addVariant, matchVariant }) => {
+    let rawScreens = theme('screens') ?? {}
+    let areSimpleScreens = Object.values(rawScreens).every((v) => typeof v === 'string')
+    let screens = normalizeScreens(theme('screens'))
+
+    /** @type {Set<string>} */
+    let unitCache = new Set([])
+
+    /** @param {string} value */
+    function units(value) {
+      return value.match(/(\D+)$/)?.[1] ?? '(none)'
+    }
+
+    /** @param {string} value */
+    function recordUnits(value) {
+      if (value !== undefined) {
+        unitCache.add(units(value))
+      }
+    }
+
+    /** @param {string} value */
+    function canUseUnits(value) {
+      recordUnits(value)
+
+      // If the cache was empty it'll become 1 because we've just added the current unit
+      // If the cache was not empty and the units are the same the size doesn't change
+      // Otherwise, if the units are different from what is already known the size will always be > 1
+      return unitCache.size === 1
+    }
+
+    for (const screen of screens) {
+      for (const value of screen.values) {
+        recordUnits(value.min)
+        recordUnits(value.max)
+      }
+    }
+
+    let screensUseConsistentUnits = unitCache.size <= 1
+
+    /**
+     * @typedef {import('./util/normalizeScreens').Screen} Screen
+     */
+
+    /**
+     * @param {'min' | 'max'} type
+     * @returns {Record<string, Screen>}
+     */
+    function buildScreenValues(type) {
+      return Object.fromEntries(
+        screens
+          .filter((screen) => isScreenSortable(screen).result)
+          .map((screen) => {
+            let { min, max } = screen.values[0]
+
+            if (type === 'min' && min !== undefined) {
+              return screen
+            } else if (type === 'min' && max !== undefined) {
+              return { ...screen, not: !screen.not }
+            } else if (type === 'max' && max !== undefined) {
+              return screen
+            } else if (type === 'max' && min !== undefined) {
+              return { ...screen, not: !screen.not }
+            }
+          })
+          .map((screen) => [screen.name, screen])
+      )
+    }
+
+    /**
+     * @param {'min' | 'max'} type
+     * @returns {(a: { value: string | Screen }, z: { value: string | Screen }) => number}
+     */
+    function buildSort(type) {
+      return (a, z) => compareScreens(type, a.value, z.value)
+    }
+
+    let maxSort = buildSort('max')
+    let minSort = buildSort('min')
+
+    /** @param {'min'|'max'} type */
+    function buildScreenVariant(type) {
+      return (value) => {
+        if (!areSimpleScreens) {
+          log.warn('complex-screen-config', [
+            'The `min-*` and `max-*` variants are not supported with a `screens` configuration containing objects.',
+          ])
+
+          return []
+        } else if (!screensUseConsistentUnits) {
+          log.warn('mixed-screen-units', [
+            'The `min-*` and `max-*` variants are not supported with a `screens` configuration containing mixed units.',
+          ])
+
+          return []
+        } else if (typeof value === 'string' && !canUseUnits(value)) {
+          log.warn('minmax-have-mixed-units', [
+            'The `min-*` and `max-*` variants are not supported with a `screens` configuration containing mixed units.',
+          ])
+
+          return []
+        }
+
+        return [`@media ${buildMediaQuery(toScreen(value, type))}`]
+      }
+    }
+
+    matchVariant('max', buildScreenVariant('max'), {
+      sort: maxSort,
+      values: areSimpleScreens ? buildScreenValues('max') : {},
+    })
 
-      addVariant(screen.name, `@media ${query}`)
+    // screens and min-* are sorted together when they can be
+    let id = 'min-screens'
+    for (let screen of screens) {
+      addVariant(screen.name, `@media ${buildMediaQuery(screen)}`, {
+        id,
+        sort: areSimpleScreens && screensUseConsistentUnits ? minSort : undefined,
+        value: screen,
+      })
     }
+
+    matchVariant('min', buildScreenVariant('min'), {
+      id,
+      sort: minSort,
+    })
+  },
+
+  supportsVariants: ({ matchVariant, theme }) => {
+    matchVariant(
+      'supports',
+      (value = '') => {
+        let check = normalize(value)
+        let isRaw = /^\w*\s*\(/.test(check)
+
+        // Chrome has a bug where `(condtion1)or(condition2)` is not valid
+        // But `(condition1) or (condition2)` is supported.
+        check = isRaw ? check.replace(/\b(and|or|not)\b/g, ' $1 ') : check
+
+        if (isRaw) {
+          return `@supports ${check}`
+        }
+
+        if (!check.includes(':')) {
+          check = `${check}: var(--tw)`
+        }
+
+        if (!(check.startsWith('(') && check.endsWith(')'))) {
+          check = `(${check})`
+        }
+
+        return `@supports ${check}`
+      },
+      { values: theme('supports') ?? {} }
+    )
+  },
+
+  hasVariants: ({ matchVariant }) => {
+    matchVariant('has', (value) => `&:has(${normalize(value)})`, { values: {} })
+    matchVariant(
+      'group-has',
+      (value, { modifier }) =>
+        modifier
+          ? `:merge(.group\\/${modifier}):has(${normalize(value)}) &`
+          : `:merge(.group):has(${normalize(value)}) &`,
+      { values: {} }
+    )
+    matchVariant(
+      'peer-has',
+      (value, { modifier }) =>
+        modifier
+          ? `:merge(.peer\\/${modifier}):has(${normalize(value)}) ~ &`
+          : `:merge(.peer):has(${normalize(value)}) ~ &`,
+      { values: {} }
+    )
+  },
+
+  ariaVariants: ({ matchVariant, theme }) => {
+    matchVariant('aria', (value) => `&[aria-${normalize(value)}]`, { values: theme('aria') ?? {} })
+    matchVariant(
+      'group-aria',
+      (value, { modifier }) =>
+        modifier
+          ? `:merge(.group\\/${modifier})[aria-${normalize(value)}] &`
+          : `:merge(.group)[aria-${normalize(value)}] &`,
+      { values: theme('aria') ?? {} }
+    )
+    matchVariant(
+      'peer-aria',
+      (value, { modifier }) =>
+        modifier
+          ? `:merge(.peer\\/${modifier})[aria-${normalize(value)}] ~ &`
+          : `:merge(.peer)[aria-${normalize(value)}] ~ &`,
+      { values: theme('aria') ?? {} }
+    )
+  },
+
+  dataVariants: ({ matchVariant, theme }) => {
+    matchVariant('data', (value) => `&[data-${normalize(value)}]`, { values: theme('data') ?? {} })
+    matchVariant(
+      'group-data',
+      (value, { modifier }) =>
+        modifier
+          ? `:merge(.group\\/${modifier})[data-${normalize(value)}] &`
+          : `:merge(.group)[data-${normalize(value)}] &`,
+      { values: theme('data') ?? {} }
+    )
+    matchVariant(
+      'peer-data',
+      (value, { modifier }) =>
+        modifier
+          ? `:merge(.peer\\/${modifier})[data-${normalize(value)}] ~ &`
+          : `:merge(.peer)[data-${normalize(value)}] ~ &`,
+      { values: theme('data') ?? {} }
+    )
   },
 
   orientationVariants: ({ addVariant }) => {
     addVariant('portrait', '@media (orientation: portrait)')
     addVariant('landscape', '@media (orientation: landscape)')
   },
+
+  prefersContrastVariants: ({ addVariant }) => {
+    addVariant('contrast-more', '@media (prefers-contrast: more)')
+    addVariant('contrast-less', '@media (prefers-contrast: less)')
+  },
+
+  forcedColorsVariants: ({ addVariant }) => {
+    addVariant('forced-colors', '@media (forced-colors: active)')
+  },
 }
 
+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(
@@ -310,6 +680,7 @@ export let corePlugins = {
     addUtilities({
       '.visible': { visibility: 'visible' },
       '.invisible': { visibility: 'hidden' },
+      '.collapse': { visibility: 'collapse' },
     })
   },
 
@@ -326,12 +697,14 @@ export let corePlugins = {
   inset: createUtilityPlugin(
     'inset',
     [
-      ['inset', ['top', 'right', 'bottom', 'left']],
+      ['inset', ['inset']],
       [
         ['inset-x', ['left', 'right']],
         ['inset-y', ['top', 'bottom']],
       ],
       [
+        ['start', ['inset-inline-start']],
+        ['end', ['inset-inline-end']],
         ['top', ['top']],
         ['right', ['right']],
         ['bottom', ['bottom']],
@@ -359,6 +732,8 @@ export let corePlugins = {
 
   float: ({ addUtilities }) => {
     addUtilities({
+      '.float-start': { float: 'inline-start' },
+      '.float-end': { float: 'inline-end' },
       '.float-right': { float: 'right' },
       '.float-left': { float: 'left' },
       '.float-none': { float: 'none' },
@@ -367,6 +742,8 @@ export let corePlugins = {
 
   clear: ({ addUtilities }) => {
     addUtilities({
+      '.clear-start': { clear: 'inline-start' },
+      '.clear-end': { clear: 'inline-end' },
       '.clear-left': { clear: 'left' },
       '.clear-right': { clear: 'right' },
       '.clear-both': { clear: 'both' },
@@ -383,6 +760,8 @@ export let corePlugins = {
         ['my', ['margin-top', 'margin-bottom']],
       ],
       [
+        ['ms', ['margin-inline-start']],
+        ['me', ['margin-inline-end']],
         ['mt', ['margin-top']],
         ['mr', ['margin-right']],
         ['mb', ['margin-bottom']],
@@ -399,6 +778,29 @@ export let corePlugins = {
     })
   },
 
+  lineClamp: ({ matchUtilities, addUtilities, theme }) => {
+    matchUtilities(
+      {
+        'line-clamp': (value) => ({
+          overflow: 'hidden',
+          display: '-webkit-box',
+          '-webkit-box-orient': 'vertical',
+          '-webkit-line-clamp': `${value}`,
+        }),
+      },
+      { values: theme('lineClamp') }
+    )
+
+    addUtilities({
+      '.line-clamp-none': {
+        overflow: 'visible',
+        display: 'block',
+        '-webkit-box-orient': 'horizontal',
+        '-webkit-line-clamp': 'none',
+      },
+    })
+  },
+
   display: ({ addUtilities }) => {
     addUtilities({
       '.block': { display: 'block' },
@@ -427,6 +829,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']]]),
@@ -453,6 +857,13 @@ export let corePlugins = {
     })
   },
 
+  captionSide: ({ addUtilities }) => {
+    addUtilities({
+      '.caption-top': { 'caption-side': 'top' },
+      '.caption-bottom': { 'caption-side': 'bottom' },
+    })
+  },
+
   borderCollapse: ({ addUtilities }) => {
     addUtilities({
       '.border-collapse': { 'border-collapse': 'collapse' },
@@ -460,6 +871,41 @@ export let corePlugins = {
     })
   },
 
+  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',
@@ -467,11 +913,11 @@ export let corePlugins = {
       [
         [
           'translate-x',
-          [['@defaults transform', {}], '--tw-translate-x', ['transform', 'var(--tw-transform)']],
+          [['@defaults transform', {}], '--tw-translate-x', ['transform', cssTransformValue]],
         ],
         [
           'translate-y',
-          [['@defaults transform', {}], '--tw-translate-y', ['transform', 'var(--tw-transform)']],
+          [['@defaults transform', {}], '--tw-translate-y', ['transform', cssTransformValue]],
         ],
       ],
     ],
@@ -479,26 +925,15 @@ export let corePlugins = {
   ),
   rotate: createUtilityPlugin(
     'rotate',
-    [
-      [
-        'rotate',
-        [['@defaults transform', {}], '--tw-rotate', ['transform', 'var(--tw-transform)']],
-      ],
-    ],
+    [['rotate', [['@defaults transform', {}], '--tw-rotate', ['transform', cssTransformValue]]]],
     { supportsNegativeValues: true }
   ),
   skew: createUtilityPlugin(
     'skew',
     [
       [
-        [
-          'skew-x',
-          [['@defaults transform', {}], '--tw-skew-x', ['transform', 'var(--tw-transform)']],
-        ],
-        [
-          'skew-y',
-          [['@defaults transform', {}], '--tw-skew-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 }
@@ -512,17 +947,17 @@ export let corePlugins = {
           ['@defaults transform', {}],
           '--tw-scale-x',
           '--tw-scale-y',
-          ['transform', 'var(--tw-transform)'],
+          ['transform', cssTransformValue],
         ],
       ],
       [
         [
           'scale-x',
-          [['@defaults transform', {}], '--tw-scale-x', ['transform', 'var(--tw-transform)']],
+          [['@defaults transform', {}], '--tw-scale-x', ['transform', cssTransformValue]],
         ],
         [
           'scale-y',
-          [['@defaults transform', {}], '--tw-scale-y', ['transform', 'var(--tw-transform)']],
+          [['@defaults transform', {}], '--tw-scale-y', ['transform', cssTransformValue]],
         ],
       ],
     ],
@@ -538,46 +973,25 @@ export let corePlugins = {
       '--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': { '@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) => escapeClassName(config('prefix') + name)
     let keyframes = Object.fromEntries(
       Object.entries(theme('keyframes') ?? {}).map(([key, value]) => {
         return [key, { [`@keyframes ${prefixName(key)}`]: value }]
@@ -612,49 +1026,50 @@ export let corePlugins = {
 
   touchAction: ({ addDefaults, addUtilities }) => {
     addDefaults('touch-action', {
-      '--tw-pan-x': 'var(--tw-empty,/*!*/ /*!*/)',
-      '--tw-pan-y': 'var(--tw-empty,/*!*/ /*!*/)',
-      '--tw-pinch-zoom': 'var(--tw-empty,/*!*/ /*!*/)',
-      '--tw-touch-action': 'var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)',
+      '--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': {
         '@defaults touch-action': {},
         '--tw-pan-x': 'pan-x',
-        'touch-action': 'var(--tw-touch-action)',
+        'touch-action': cssTouchActionValue,
       },
       '.touch-pan-left': {
         '@defaults touch-action': {},
         '--tw-pan-x': 'pan-left',
-        'touch-action': 'var(--tw-touch-action)',
+        'touch-action': cssTouchActionValue,
       },
       '.touch-pan-right': {
         '@defaults touch-action': {},
         '--tw-pan-x': 'pan-right',
-        'touch-action': 'var(--tw-touch-action)',
+        'touch-action': cssTouchActionValue,
       },
       '.touch-pan-y': {
         '@defaults touch-action': {},
         '--tw-pan-y': 'pan-y',
-        'touch-action': 'var(--tw-touch-action)',
+        'touch-action': cssTouchActionValue,
       },
       '.touch-pan-up': {
         '@defaults touch-action': {},
         '--tw-pan-y': 'pan-up',
-        'touch-action': 'var(--tw-touch-action)',
+        'touch-action': cssTouchActionValue,
       },
       '.touch-pan-down': {
         '@defaults touch-action': {},
         '--tw-pan-y': 'pan-down',
-        'touch-action': 'var(--tw-touch-action)',
+        'touch-action': cssTouchActionValue,
       },
       '.touch-pinch-zoom': {
         '@defaults touch-action': {},
         '--tw-pinch-zoom': 'pinch-zoom',
-        'touch-action': 'var(--tw-touch-action)',
+        'touch-action': cssTouchActionValue,
       },
       '.touch-manipulation': { 'touch-action': 'manipulation' },
     })
@@ -727,6 +1142,8 @@ export let corePlugins = {
         ['scroll-my', ['scroll-margin-top', 'scroll-margin-bottom']],
       ],
       [
+        ['scroll-ms', ['scroll-margin-inline-start']],
+        ['scroll-me', ['scroll-margin-inline-end']],
         ['scroll-mt', ['scroll-margin-top']],
         ['scroll-mr', ['scroll-margin-right']],
         ['scroll-mb', ['scroll-margin-bottom']],
@@ -743,6 +1160,8 @@ export let corePlugins = {
       ['scroll-py', ['scroll-padding-top', 'scroll-padding-bottom']],
     ],
     [
+      ['scroll-ps', ['scroll-padding-inline-start']],
+      ['scroll-pe', ['scroll-padding-inline-end']],
       ['scroll-pt', ['scroll-padding-top']],
       ['scroll-pr', ['scroll-padding-right']],
       ['scroll-pb', ['scroll-padding-bottom']],
@@ -756,12 +1175,13 @@ export let corePlugins = {
       '.list-outside': { 'list-style-position': 'outside' },
     })
   },
-
   listStyleType: createUtilityPlugin('listStyleType', [['list', ['listStyleType']]]),
+  listStyleImage: createUtilityPlugin('listStyleImage', [['list-image', ['listStyleImage']]]),
 
   appearance: ({ addUtilities }) => {
     addUtilities({
       '.appearance-none': { appearance: 'none' },
+      '.appearance-auto': { appearance: 'auto' },
     })
   },
 
@@ -808,6 +1228,7 @@ export let corePlugins = {
     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' },
     })
@@ -844,6 +1265,7 @@ export let corePlugins = {
       '.place-content-between': { 'place-content': 'space-between' },
       '.place-content-around': { 'place-content': 'space-around' },
       '.place-content-evenly': { 'place-content': 'space-evenly' },
+      '.place-content-baseline': { 'place-content': 'baseline' },
       '.place-content-stretch': { 'place-content': 'stretch' },
     })
   },
@@ -853,18 +1275,22 @@ export let corePlugins = {
       '.place-items-start': { 'place-items': 'start' },
       '.place-items-end': { 'place-items': 'end' },
       '.place-items-center': { 'place-items': 'center' },
+      '.place-items-baseline': { 'place-items': 'baseline' },
       '.place-items-stretch': { 'place-items': 'stretch' },
     })
   },
 
   alignContent: ({ addUtilities }) => {
     addUtilities({
+      '.content-normal': { 'align-content': 'normal' },
       '.content-center': { 'align-content': 'center' },
       '.content-start': { 'align-content': 'flex-start' },
       '.content-end': { 'align-content': 'flex-end' },
       '.content-between': { 'align-content': 'space-between' },
       '.content-around': { 'align-content': 'space-around' },
       '.content-evenly': { 'align-content': 'space-evenly' },
+      '.content-baseline': { 'align-content': 'baseline' },
+      '.content-stretch': { 'align-content': 'stretch' },
     })
   },
 
@@ -880,12 +1306,14 @@ export let corePlugins = {
 
   justifyContent: ({ addUtilities }) => {
     addUtilities({
+      '.justify-normal': { 'justify-content': 'normal' },
       '.justify-start': { 'justify-content': 'flex-start' },
       '.justify-end': { 'justify-content': 'flex-end' },
       '.justify-center': { 'justify-content': 'center' },
       '.justify-between': { 'justify-content': 'space-between' },
       '.justify-around': { 'justify-content': 'space-around' },
       '.justify-evenly': { 'justify-content': 'space-evenly' },
+      '.justify-stretch': { 'justify-content': 'stretch' },
     })
   },
 
@@ -969,7 +1397,7 @@ export let corePlugins = {
           }
         },
       },
-      { values: theme('divideWidth'), type: ['line-width', 'length'] }
+      { values: theme('divideWidth'), type: ['line-width', 'length', 'any'] }
     )
 
     addUtilities({
@@ -1017,7 +1445,7 @@ export let corePlugins = {
       },
       {
         values: (({ DEFAULT: _, ...colors }) => colors)(flattenColorPalette(theme('divideColor'))),
-        type: 'color',
+        type: ['color', 'any'],
       }
     )
   },
@@ -1114,6 +1542,14 @@ export let corePlugins = {
     })
   },
 
+  hyphens: ({ addUtilities }) => {
+    addUtilities({
+      '.hyphens-none': { hyphens: 'none' },
+      '.hyphens-manual': { hyphens: 'manual' },
+      '.hyphens-auto': { hyphens: 'auto' },
+    })
+  },
+
   whitespace: ({ addUtilities }) => {
     addUtilities({
       '.whitespace-normal': { 'white-space': 'normal' },
@@ -1121,6 +1557,16 @@ export let corePlugins = {
       '.whitespace-pre': { 'white-space': 'pre' },
       '.whitespace-pre-line': { 'white-space': 'pre-line' },
       '.whitespace-pre-wrap': { 'white-space': 'pre-wrap' },
+      '.whitespace-break-spaces': { 'white-space': 'break-spaces' },
+    })
+  },
+
+  textWrap: ({ addUtilities }) => {
+    addUtilities({
+      '.text-wrap': { 'text-wrap': 'wrap' },
+      '.text-nowrap': { 'text-wrap': 'nowrap' },
+      '.text-balance': { 'text-wrap': 'balance' },
+      '.text-pretty': { 'text-wrap': 'pretty' },
     })
   },
 
@@ -1129,18 +1575,25 @@ export let corePlugins = {
       '.break-normal': { 'overflow-wrap': 'normal', 'word-break': 'normal' },
       '.break-words': { 'overflow-wrap': 'break-word' },
       '.break-all': { 'word-break': 'break-all' },
+      '.break-keep': { 'word-break': 'keep-all' },
     })
   },
 
   borderRadius: createUtilityPlugin('borderRadius', [
     ['rounded', ['border-radius']],
     [
+      ['rounded-s', ['border-start-start-radius', 'border-end-start-radius']],
+      ['rounded-e', ['border-start-end-radius', 'border-end-end-radius']],
       ['rounded-t', ['border-top-left-radius', 'border-top-right-radius']],
       ['rounded-r', ['border-top-right-radius', 'border-bottom-right-radius']],
       ['rounded-b', ['border-bottom-right-radius', 'border-bottom-left-radius']],
       ['rounded-l', ['border-top-left-radius', 'border-bottom-left-radius']],
     ],
     [
+      ['rounded-ss', ['border-start-start-radius']],
+      ['rounded-se', ['border-start-end-radius']],
+      ['rounded-ee', ['border-end-end-radius']],
+      ['rounded-es', ['border-end-start-radius']],
       ['rounded-tl', ['border-top-left-radius']],
       ['rounded-tr', ['border-top-right-radius']],
       ['rounded-br', ['border-bottom-right-radius']],
@@ -1157,6 +1610,8 @@ export let corePlugins = {
         ['border-y', [['@defaults border-width', {}], 'border-top-width', 'border-bottom-width']],
       ],
       [
+        ['border-s', [['@defaults border-width', {}], 'border-inline-start-width']],
+        ['border-e', [['@defaults border-width', {}], 'border-inline-end-width']],
         ['border-t', [['@defaults border-width', {}], 'border-top-width']],
         ['border-r', [['@defaults border-width', {}], 'border-right-width']],
         ['border-b', [['@defaults border-width', {}], 'border-bottom-width']],
@@ -1177,23 +1632,7 @@ export let corePlugins = {
     })
   },
 
-  borderColor: ({ addDefaults, matchUtilities, theme, corePlugins }) => {
-    if (!corePlugins('borderOpacity')) {
-      let value = theme('borderColor.DEFAULT', 'currentColor')
-      addDefaults('border-width', {
-        'border-color': toColorValue(value),
-      })
-    } else {
-      addDefaults(
-        'border-width',
-        withAlphaVariable({
-          color: theme('borderColor.DEFAULT', 'currentColor'),
-          property: 'border-color',
-          variable: '--tw-border-opacity',
-        })
-      )
-    }
-
+  borderColor: ({ matchUtilities, theme, corePlugins }) => {
     matchUtilities(
       {
         border: (value) => {
@@ -1212,7 +1651,7 @@ export let corePlugins = {
       },
       {
         values: (({ DEFAULT: _, ...colors }) => colors)(flattenColorPalette(theme('borderColor'))),
-        type: ['color'],
+        type: ['color', 'any'],
       }
     )
 
@@ -1249,12 +1688,38 @@ export let corePlugins = {
       },
       {
         values: (({ DEFAULT: _, ...colors }) => colors)(flattenColorPalette(theme('borderColor'))),
-        type: 'color',
+        type: ['color', 'any'],
       }
     )
 
     matchUtilities(
       {
+        'border-s': (value) => {
+          if (!corePlugins('borderOpacity')) {
+            return {
+              'border-inline-start-color': toColorValue(value),
+            }
+          }
+
+          return withAlphaVariable({
+            color: value,
+            property: 'border-inline-start-color',
+            variable: '--tw-border-opacity',
+          })
+        },
+        'border-e': (value) => {
+          if (!corePlugins('borderOpacity')) {
+            return {
+              'border-inline-end-color': toColorValue(value),
+            }
+          }
+
+          return withAlphaVariable({
+            color: value,
+            property: 'border-inline-end-color',
+            variable: '--tw-border-opacity',
+          })
+        },
         'border-t': (value) => {
           if (!corePlugins('borderOpacity')) {
             return {
@@ -1310,7 +1775,7 @@ export let corePlugins = {
       },
       {
         values: (({ DEFAULT: _, ...colors }) => colors)(flattenColorPalette(theme('borderColor'))),
-        type: 'color',
+        type: ['color', 'any'],
       }
     )
   },
@@ -1336,7 +1801,7 @@ export let corePlugins = {
           })
         },
       },
-      { values: flattenColorPalette(theme('backgroundColor')), type: 'color' }
+      { values: flattenColorPalette(theme('backgroundColor')), type: ['color', 'any'] }
     )
   },
 
@@ -1351,44 +1816,98 @@ export let corePlugins = {
       return withAlphaValue(value, 0, 'rgb(255 255 255 / 0)')
     }
 
-    return function ({ matchUtilities, theme }) {
+    return function ({ matchUtilities, theme, addDefaults }) {
+      addDefaults('gradient-color-stops', {
+        '--tw-gradient-from-position': ' ',
+        '--tw-gradient-via-position': ' ',
+        '--tw-gradient-to-position': ' ',
+      })
+
       let options = {
         values: flattenColorPalette(theme('gradientColorStops')),
         type: ['color', 'any'],
       }
 
+      let positionOptions = {
+        values: theme('gradientColorStopPositions'),
+        type: ['length', 'percentage'],
+      }
+
       matchUtilities(
         {
           from: (value) => {
             let transparentToValue = transparentTo(value)
 
             return {
-              '--tw-gradient-from': toColorValue(value, 'from'),
-              '--tw-gradient-stops': `var(--tw-gradient-from), var(--tw-gradient-to, ${transparentToValue})`,
+              '@defaults gradient-color-stops': {},
+              '--tw-gradient-from': `${toColorValue(value)} var(--tw-gradient-from-position)`,
+              '--tw-gradient-to': `${transparentToValue} var(--tw-gradient-to-position)`,
+              '--tw-gradient-stops': `var(--tw-gradient-from), var(--tw-gradient-to)`,
             }
           },
         },
         options
       )
+
+      matchUtilities(
+        {
+          from: (value) => {
+            return {
+              '--tw-gradient-from-position': value,
+            }
+          },
+        },
+        positionOptions
+      )
+
       matchUtilities(
         {
           via: (value) => {
             let transparentToValue = transparentTo(value)
 
             return {
+              '@defaults gradient-color-stops': {},
+              '--tw-gradient-to': `${transparentToValue}  var(--tw-gradient-to-position)`,
               '--tw-gradient-stops': `var(--tw-gradient-from), ${toColorValue(
-                value,
-                'via'
-              )}, var(--tw-gradient-to, ${transparentToValue})`,
+                value
+              )} var(--tw-gradient-via-position), var(--tw-gradient-to)`,
             }
           },
         },
         options
       )
+
+      matchUtilities(
+        {
+          via: (value) => {
+            return {
+              '--tw-gradient-via-position': value,
+            }
+          },
+        },
+        positionOptions
+      )
+
       matchUtilities(
-        { to: (value) => ({ '--tw-gradient-to': toColorValue(value, 'to') }) },
+        {
+          to: (value) => ({
+            '@defaults gradient-color-stops': {},
+            '--tw-gradient-to': `${toColorValue(value)} var(--tw-gradient-to-position)`,
+          }),
+        },
         options
       )
+
+      matchUtilities(
+        {
+          to: (value) => {
+            return {
+              '--tw-gradient-to-position': value,
+            }
+          },
+        },
+        positionOptions
+      )
     }
   })(),
 
@@ -1402,7 +1921,7 @@ export let corePlugins = {
   },
 
   backgroundSize: createUtilityPlugin('backgroundSize', [['bg', ['background-size']]], {
-    type: ['lookup', 'length', 'percentage'],
+    type: ['lookup', 'length', 'percentage', 'size'],
   }),
 
   backgroundAttachment: ({ addUtilities }) => {
@@ -1423,7 +1942,7 @@ export let corePlugins = {
   },
 
   backgroundPosition: createUtilityPlugin('backgroundPosition', [['bg', ['background-position']]], {
-    type: ['lookup', 'position'],
+    type: ['lookup', ['position', { preferOnConflict: true }]],
   }),
 
   backgroundRepeat: ({ addUtilities }) => {
@@ -1463,7 +1982,7 @@ export let corePlugins = {
           return { stroke: toColorValue(value) }
         },
       },
-      { values: flattenColorPalette(theme('stroke')), type: ['color', 'url'] }
+      { values: flattenColorPalette(theme('stroke')), type: ['color', 'url', 'any'] }
     )
   },
 
@@ -1489,6 +2008,8 @@ export let corePlugins = {
       ['py', ['padding-top', 'padding-bottom']],
     ],
     [
+      ['ps', ['padding-inline-start']],
+      ['pe', ['padding-inline-end']],
       ['pt', ['padding-top']],
       ['pr', ['padding-right']],
       ['pb', ['padding-bottom']],
@@ -1502,6 +2023,8 @@ export let corePlugins = {
       '.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' },
     })
   },
 
@@ -1524,16 +2047,46 @@ export let corePlugins = {
     matchUtilities({ align: (value) => ({ 'vertical-align': value }) })
   },
 
-  fontFamily: createUtilityPlugin('fontFamily', [['font', ['fontFamily']]], {
-    type: ['lookup', 'generic-name', 'family-name'],
-  }),
+  fontFamily: ({ matchUtilities, theme }) => {
+    matchUtilities(
+      {
+        font: (value) => {
+          let [families, options = {}] =
+            Array.isArray(value) && isPlainObject(value[1]) ? value : [value]
+          let { fontFeatureSettings, fontVariationSettings } = options
+
+          return {
+            'font-family': Array.isArray(families) ? families.join(', ') : families,
+            ...(fontFeatureSettings === undefined
+              ? {}
+              : { 'font-feature-settings': fontFeatureSettings }),
+            ...(fontVariationSettings === undefined
+              ? {}
+              : { 'font-variation-settings': fontVariationSettings }),
+          }
+        },
+      },
+      {
+        values: theme('fontFamily'),
+        type: ['lookup', 'generic-name', 'family-name'],
+      }
+    )
+  },
 
   fontSize: ({ matchUtilities, theme }) => {
     matchUtilities(
       {
-        text: (value) => {
+        text: (value, { modifier }) => {
           let [fontSize, options] = Array.isArray(value) ? value : [value]
-          let { lineHeight, letterSpacing } = isPlainObject(options)
+
+          if (modifier) {
+            return {
+              'font-size': fontSize,
+              'line-height': modifier,
+            }
+          }
+
+          let { lineHeight, letterSpacing, fontWeight } = isPlainObject(options)
             ? options
             : { lineHeight: options }
 
@@ -1541,18 +2094,20 @@ export let corePlugins = {
             'font-size': fontSize,
             ...(lineHeight === undefined ? {} : { 'line-height': lineHeight }),
             ...(letterSpacing === undefined ? {} : { 'letter-spacing': letterSpacing }),
+            ...(fontWeight === undefined ? {} : { 'font-weight': fontWeight }),
           }
         },
       },
       {
         values: theme('fontSize'),
+        modifiers: theme('lineHeight'),
         type: ['absolute-size', 'relative-size', 'length', 'percentage'],
       }
     )
   },
 
   fontWeight: createUtilityPlugin('fontWeight', [['font', ['fontWeight']]], {
-    type: ['lookup', 'number'],
+    type: ['lookup', 'number', 'any'],
   }),
 
   textTransform: ({ addUtilities }) => {
@@ -1571,57 +2126,59 @@ export let corePlugins = {
     })
   },
 
-  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({
-      '@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': {
         '@defaults font-variant-numeric': {},
         '--tw-ordinal': 'ordinal',
-        'font-variant-numeric': 'var(--tw-font-variant-numeric)',
+        'font-variant-numeric': cssFontVariantNumericValue,
       },
       '.slashed-zero': {
         '@defaults font-variant-numeric': {},
         '--tw-slashed-zero': 'slashed-zero',
-        'font-variant-numeric': 'var(--tw-font-variant-numeric)',
+        'font-variant-numeric': cssFontVariantNumericValue,
       },
       '.lining-nums': {
         '@defaults font-variant-numeric': {},
         '--tw-numeric-figure': 'lining-nums',
-        'font-variant-numeric': 'var(--tw-font-variant-numeric)',
+        'font-variant-numeric': cssFontVariantNumericValue,
       },
       '.oldstyle-nums': {
         '@defaults font-variant-numeric': {},
         '--tw-numeric-figure': 'oldstyle-nums',
-        'font-variant-numeric': 'var(--tw-font-variant-numeric)',
+        'font-variant-numeric': cssFontVariantNumericValue,
       },
       '.proportional-nums': {
         '@defaults font-variant-numeric': {},
         '--tw-numeric-spacing': 'proportional-nums',
-        'font-variant-numeric': 'var(--tw-font-variant-numeric)',
+        'font-variant-numeric': cssFontVariantNumericValue,
       },
       '.tabular-nums': {
         '@defaults font-variant-numeric': {},
         '--tw-numeric-spacing': 'tabular-nums',
-        'font-variant-numeric': 'var(--tw-font-variant-numeric)',
+        'font-variant-numeric': cssFontVariantNumericValue,
       },
       '.diagonal-fractions': {
         '@defaults font-variant-numeric': {},
         '--tw-numeric-fraction': 'diagonal-fractions',
-        'font-variant-numeric': 'var(--tw-font-variant-numeric)',
+        'font-variant-numeric': cssFontVariantNumericValue,
       },
       '.stacked-fractions': {
         '@defaults font-variant-numeric': {},
         '--tw-numeric-fraction': 'stacked-fractions',
-        'font-variant-numeric': 'var(--tw-font-variant-numeric)',
+        'font-variant-numeric': cssFontVariantNumericValue,
       },
     })
   },
@@ -1646,7 +2203,7 @@ export let corePlugins = {
           })
         },
       },
-      { values: flattenColorPalette(theme('textColor')), type: 'color' }
+      { values: flattenColorPalette(theme('textColor')), type: ['color', 'any'] }
     )
   },
 
@@ -1668,7 +2225,7 @@ export let corePlugins = {
           return { 'text-decoration-color': toColorValue(value) }
         },
       },
-      { values: flattenColorPalette(theme('textDecorationColor')), type: ['color'] }
+      { values: flattenColorPalette(theme('textDecorationColor')), type: ['color', 'any'] }
     )
   },
 
@@ -1691,7 +2248,7 @@ export let corePlugins = {
   textUnderlineOffset: createUtilityPlugin(
     'textUnderlineOffset',
     [['underline-offset', ['text-underline-offset']]],
-    { type: ['length', 'percentage'] }
+    { type: ['length', 'percentage', 'any'] }
   ),
 
   fontSmoothing: ({ addUtilities }) => {
@@ -1806,6 +2363,8 @@ export let corePlugins = {
       '.mix-blend-saturation': { 'mix-blend-mode': 'saturation' },
       '.mix-blend-color': { 'mix-blend-mode': 'color' },
       '.mix-blend-luminosity': { 'mix-blend-mode': 'luminosity' },
+      '.mix-blend-plus-darker': { 'mix-blend-mode': 'plus-darker' },
+      '.mix-blend-plus-lighter': { 'mix-blend-mode': 'plus-lighter' },
     })
   },
 
@@ -1818,7 +2377,7 @@ export let corePlugins = {
     ].join(', ')
 
     return function ({ matchUtilities, addDefaults, theme }) {
-      addDefaults(' box-shadow', {
+      addDefaults('box-shadow', {
         '--tw-ring-offset-shadow': '0 0 #0000',
         '--tw-ring-shadow': '0 0 #0000',
         '--tw-shadow': '0 0 #0000',
@@ -1863,7 +2422,7 @@ export let corePlugins = {
           }
         },
       },
-      { values: flattenColorPalette(theme('boxShadowColor')), type: ['color'] }
+      { values: flattenColorPalette(theme('boxShadowColor')), type: ['color', 'any'] }
     )
   },
 
@@ -1877,7 +2436,6 @@ export let corePlugins = {
       '.outline-dashed': { 'outline-style': 'dashed' },
       '.outline-dotted': { 'outline-style': 'dotted' },
       '.outline-double': { 'outline-style': 'double' },
-      '.outline-hidden': { 'outline-style': 'hidden' },
     })
   },
 
@@ -1886,7 +2444,8 @@ export let corePlugins = {
   }),
 
   outlineOffset: createUtilityPlugin('outlineOffset', [['outline-offset', ['outline-offset']]], {
-    type: ['length', 'number', 'percentage'],
+    type: ['length', 'number', 'percentage', 'any'],
+    supportsNegativeValues: true,
   }),
 
   outlineColor: ({ matchUtilities, theme }) => {
@@ -1896,20 +2455,31 @@ export let corePlugins = {
           return { 'outline-color': toColorValue(value) }
         },
       },
-      { values: flattenColorPalette(theme('outlineColor')), type: ['color'] }
+      { values: flattenColorPalette(theme('outlineColor')), type: ['color', 'any'] }
     )
   },
 
-  ringWidth: ({ matchUtilities, addDefaults, addUtilities, theme }) => {
-    let ringOpacityDefault = theme('ringOpacity.DEFAULT', '0.5')
-    let ringColorDefault = withAlphaValue(
-      theme('ringColor.DEFAULT'),
-      ringOpacityDefault,
-      `rgb(147 197 253 / ${ringOpacityDefault})`
-    )
+  ringWidth: ({ matchUtilities, addDefaults, addUtilities, theme, config }) => {
+    let ringColorDefault = (() => {
+      if (flagEnabled(config(), 'respectDefaultRingColorOpacity')) {
+        return theme('ringColor.DEFAULT')
+      }
+
+      let ringOpacityDefault = theme('ringOpacity.DEFAULT', '0.5')
+
+      if (!theme('ringColor')?.DEFAULT) {
+        return `rgb(147 197 253 / ${ringOpacityDefault})`
+      }
+
+      return withAlphaValue(
+        theme('ringColor')?.DEFAULT,
+        ringOpacityDefault,
+        `rgb(147 197 253 / ${ringOpacityDefault})`
+      )
+    })()
 
     addDefaults('ring-width', {
-      '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)',
+      '--tw-ring-inset': ' ',
       '--tw-ring-offset-width': theme('ringOffsetWidth.DEFAULT', '0px'),
       '--tw-ring-offset-color': theme('ringOffsetColor.DEFAULT', '#fff'),
       '--tw-ring-color': ringColorDefault,
@@ -1942,10 +2512,16 @@ export let corePlugins = {
     })
   },
 
-  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',
@@ -1959,14 +2535,18 @@ export let corePlugins = {
             ([modifier]) => modifier !== 'DEFAULT'
           )
         ),
-        type: 'color',
+        type: ['color', 'any'],
       }
     )
   },
 
-  ringOpacity: createUtilityPlugin('ringOpacity', [['ring-opacity', ['--tw-ring-opacity']]], {
-    filterDefault: true,
-  }),
+  ringOpacity: (helpers) => {
+    let { config } = helpers
+
+    return createUtilityPlugin('ringOpacity', [['ring-opacity', ['--tw-ring-opacity']]], {
+      filterDefault: !flagEnabled(config(), 'respectDefaultRingColorOpacity'),
+    })(helpers)
+  },
   ringOffsetWidth: createUtilityPlugin(
     'ringOffsetWidth',
     [['ring-offset', ['--tw-ring-offset-width']]],
@@ -1982,7 +2562,7 @@ export let corePlugins = {
           }
         },
       },
-      { values: flattenColorPalette(theme('ringOffsetColor')), type: 'color' }
+      { values: flattenColorPalette(theme('ringOffsetColor')), type: ['color', 'any'] }
     )
   },
 
@@ -1993,7 +2573,7 @@ export let corePlugins = {
           return {
             '--tw-blur': `blur(${value})`,
             '@defaults filter': {},
-            filter: 'var(--tw-filter)',
+            filter: cssFilterValue,
           }
         },
       },
@@ -2008,7 +2588,7 @@ export let corePlugins = {
           return {
             '--tw-brightness': `brightness(${value})`,
             '@defaults filter': {},
-            filter: 'var(--tw-filter)',
+            filter: cssFilterValue,
           }
         },
       },
@@ -2023,7 +2603,7 @@ export let corePlugins = {
           return {
             '--tw-contrast': `contrast(${value})`,
             '@defaults filter': {},
-            filter: 'var(--tw-filter)',
+            filter: cssFilterValue,
           }
         },
       },
@@ -2040,7 +2620,7 @@ export let corePlugins = {
               ? value.map((v) => `drop-shadow(${v})`).join(' ')
               : `drop-shadow(${value})`,
             '@defaults filter': {},
-            filter: 'var(--tw-filter)',
+            filter: cssFilterValue,
           }
         },
       },
@@ -2055,7 +2635,7 @@ export let corePlugins = {
           return {
             '--tw-grayscale': `grayscale(${value})`,
             '@defaults filter': {},
-            filter: 'var(--tw-filter)',
+            filter: cssFilterValue,
           }
         },
       },
@@ -2070,7 +2650,7 @@ export let corePlugins = {
           return {
             '--tw-hue-rotate': `hue-rotate(${value})`,
             '@defaults filter': {},
-            filter: 'var(--tw-filter)',
+            filter: cssFilterValue,
           }
         },
       },
@@ -2085,7 +2665,7 @@ export let corePlugins = {
           return {
             '--tw-invert': `invert(${value})`,
             '@defaults filter': {},
-            filter: 'var(--tw-filter)',
+            filter: cssFilterValue,
           }
         },
       },
@@ -2100,7 +2680,7 @@ export let corePlugins = {
           return {
             '--tw-saturate': `saturate(${value})`,
             '@defaults filter': {},
-            filter: 'var(--tw-filter)',
+            filter: cssFilterValue,
           }
         },
       },
@@ -2115,7 +2695,7 @@ export let corePlugins = {
           return {
             '--tw-sepia': `sepia(${value})`,
             '@defaults filter': {},
-            filter: 'var(--tw-filter)',
+            filter: cssFilterValue,
           }
         },
       },
@@ -2125,29 +2705,18 @@ export let corePlugins = {
 
   filter: ({ addDefaults, addUtilities }) => {
     addDefaults('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)' },
+      '--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' },
     })
   },
@@ -2159,7 +2728,7 @@ export let corePlugins = {
           return {
             '--tw-backdrop-blur': `blur(${value})`,
             '@defaults backdrop-filter': {},
-            'backdrop-filter': 'var(--tw-backdrop-filter)',
+            'backdrop-filter': cssBackdropFilterValue,
           }
         },
       },
@@ -2174,7 +2743,7 @@ export let corePlugins = {
           return {
             '--tw-backdrop-brightness': `brightness(${value})`,
             '@defaults backdrop-filter': {},
-            'backdrop-filter': 'var(--tw-backdrop-filter)',
+            'backdrop-filter': cssBackdropFilterValue,
           }
         },
       },
@@ -2189,7 +2758,7 @@ export let corePlugins = {
           return {
             '--tw-backdrop-contrast': `contrast(${value})`,
             '@defaults backdrop-filter': {},
-            'backdrop-filter': 'var(--tw-backdrop-filter)',
+            'backdrop-filter': cssBackdropFilterValue,
           }
         },
       },
@@ -2204,7 +2773,7 @@ export let corePlugins = {
           return {
             '--tw-backdrop-grayscale': `grayscale(${value})`,
             '@defaults backdrop-filter': {},
-            'backdrop-filter': 'var(--tw-backdrop-filter)',
+            'backdrop-filter': cssBackdropFilterValue,
           }
         },
       },
@@ -2219,7 +2788,7 @@ export let corePlugins = {
           return {
             '--tw-backdrop-hue-rotate': `hue-rotate(${value})`,
             '@defaults backdrop-filter': {},
-            'backdrop-filter': 'var(--tw-backdrop-filter)',
+            'backdrop-filter': cssBackdropFilterValue,
           }
         },
       },
@@ -2234,7 +2803,7 @@ export let corePlugins = {
           return {
             '--tw-backdrop-invert': `invert(${value})`,
             '@defaults backdrop-filter': {},
-            'backdrop-filter': 'var(--tw-backdrop-filter)',
+            'backdrop-filter': cssBackdropFilterValue,
           }
         },
       },
@@ -2249,7 +2818,7 @@ export let corePlugins = {
           return {
             '--tw-backdrop-opacity': `opacity(${value})`,
             '@defaults backdrop-filter': {},
-            'backdrop-filter': 'var(--tw-backdrop-filter)',
+            'backdrop-filter': cssBackdropFilterValue,
           }
         },
       },
@@ -2264,7 +2833,7 @@ export let corePlugins = {
           return {
             '--tw-backdrop-saturate': `saturate(${value})`,
             '@defaults backdrop-filter': {},
-            'backdrop-filter': 'var(--tw-backdrop-filter)',
+            'backdrop-filter': cssBackdropFilterValue,
           }
         },
       },
@@ -2279,7 +2848,7 @@ export let corePlugins = {
           return {
             '--tw-backdrop-sepia': `sepia(${value})`,
             '@defaults backdrop-filter': {},
-            'backdrop-filter': 'var(--tw-backdrop-filter)',
+            'backdrop-filter': cssBackdropFilterValue,
           }
         },
       },
@@ -2289,31 +2858,20 @@ export let corePlugins = {
 
   backdropFilter: ({ addDefaults, addUtilities }) => {
     addDefaults('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(' '),
+      '--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' },
     })
@@ -2353,7 +2911,55 @@ export let corePlugins = {
     { filterDefault: true }
   ),
   willChange: createUtilityPlugin('willChange', [['will-change', ['will-change']]]),
+  contain: ({ addDefaults, addUtilities }) => {
+    let cssContainValue =
+      'var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style)'
+
+    addDefaults('contain', {
+      '--tw-contain-size': ' ',
+      '--tw-contain-layout': ' ',
+      '--tw-contain-paint': ' ',
+      '--tw-contain-style': ' ',
+    })
+
+    addUtilities({
+      '.contain-none': { contain: 'none' },
+      '.contain-content': { contain: 'content' },
+      '.contain-strict': { contain: 'strict' },
+      '.contain-size': {
+        '@defaults contain': {},
+        '--tw-contain-size': 'size',
+        contain: cssContainValue,
+      },
+      '.contain-inline-size': {
+        '@defaults contain': {},
+        '--tw-contain-size': 'inline-size',
+        contain: cssContainValue,
+      },
+      '.contain-layout': {
+        '@defaults contain': {},
+        '--tw-contain-layout': 'layout',
+        contain: cssContainValue,
+      },
+      '.contain-paint': {
+        '@defaults contain': {},
+        '--tw-contain-paint': 'paint',
+        contain: cssContainValue,
+      },
+      '.contain-style': {
+        '@defaults contain': {},
+        '--tw-contain-style': 'style',
+        contain: cssContainValue,
+      },
+    })
+  },
   content: createUtilityPlugin('content', [
     ['content', ['--tw-content', ['content', 'var(--tw-content)']]],
   ]),
+  forcedColorAdjust: ({ addUtilities }) => {
+    addUtilities({
+      '.forced-color-adjust-auto': { 'forced-color-adjust': 'auto' },
+      '.forced-color-adjust-none': { 'forced-color-adjust': 'none' },
+    })
+  },
 }