tailwindcss 0.0.0-insiders.ba2fd32 → 0.0.0-insiders.bbafc8e

package/lib/corePlugins.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.variantPlugins = exports.corePlugins = void 0;
+exports.corePlugins = exports.variantPlugins = void 0;
 var _fs = _interopRequireDefault(require("fs"));
 var path = _interopRequireWildcard(require("path"));
 var _postcss = _interopRequireDefault(require("postcss"));
@@ -16,6 +16,8 @@ var _isPlainObject = _interopRequireDefault(require("./util/isPlainObject"));
 var _transformThemeValue = _interopRequireDefault(require("./util/transformThemeValue"));
 var _packageJson = require("../package.json");
 var _log = _interopRequireDefault(require("./util/log"));
+var _normalizeScreens = require("./util/normalizeScreens");
+var _parseBoxShadowValue = require("./util/parseBoxShadowValue");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -25,13 +27,11 @@ function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
     } else {
-        var newObj = {
-        };
+        var newObj = {};
         if (obj != null) {
             for(var key in obj){
                 if (Object.prototype.hasOwnProperty.call(obj, key)) {
-                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {
-                    };
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
                     if (desc.get || desc.set) {
                         Object.defineProperty(newObj, key, desc);
                     } else {
@@ -57,6 +57,7 @@ let variantPlugins = {
             '&::selection'
         ]);
         addVariant('file', '&::file-selector-button');
+        addVariant('placeholder', '&::placeholder');
         addVariant('before', ({ container  })=>{
             container.walkRules((rule)=>{
                 let foundContent = false;
@@ -115,7 +116,28 @@ let variantPlugins = {
             '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',
@@ -148,13 +170,22 @@ let variantPlugins = {
             ]
         );
         for (let [variantName, state] of pseudoVariants){
-            addVariant(variantName, `&${state}`);
+            addVariant(variantName, (ctx)=>{
+                let result = typeof state === 'function' ? state(ctx) : state;
+                return `&${result}`;
+            });
         }
         for (let [variantName1, state1] of pseudoVariants){
-            addVariant(`group-${variantName1}`, `:merge(.group)${state1} &`);
+            addVariant(`group-${variantName1}`, (ctx)=>{
+                let result = typeof state1 === 'function' ? state1(ctx) : state1;
+                return `:merge(.group)${result} &`;
+            });
         }
         for (let [variantName2, state2] of pseudoVariants){
-            addVariant(`peer-${variantName2}`, `:merge(.peer)${state2} ~ &`);
+            addVariant(`peer-${variantName2}`, (ctx)=>{
+                let result = typeof state2 === 'function' ? state2(ctx) : state2;
+                return `:merge(.peer)${result} ~ &`;
+            });
         }
     },
     directionVariants: ({ addVariant  })=>{
@@ -183,7 +214,8 @@ let variantPlugins = {
             mode = 'media';
             _log.default.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.', 
+                'Change `darkMode` to `media` or remove it entirely.',
+                'https://tailwindcss.com/docs/upgrade-guide#remove-dark-mode-configuration', 
             ]);
         }
         if (mode === 'class') {
@@ -196,14 +228,47 @@ let variantPlugins = {
         addVariant('print', '@media print');
     },
     screenVariants: ({ theme , addVariant  })=>{
-        for(let screen in theme('screens')){
-            let size = theme('screens')[screen];
-            let query = (0, _buildMediaQuery).default(size);
-            addVariant(screen, `@media ${query}`);
+        for (let screen of (0, _normalizeScreens).normalizeScreens(theme('screens'))){
+            let query = (0, _buildMediaQuery).default(screen);
+            addVariant(screen.name, `@media ${query}`);
         }
+    },
+    orientationVariants: ({ addVariant  })=>{
+        addVariant('portrait', '@media (orientation: portrait)');
+        addVariant('landscape', '@media (orientation: landscape)');
     }
 };
 exports.variantPlugins = variantPlugins;
+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(' ');
 let corePlugins = {
     preflight: ({ addBase  })=>{
         let preflightStyles = _postcss.default.parse(_fs.default.readFileSync(path.join(__dirname, './css/preflight.css'), 'utf8'));
@@ -215,27 +280,11 @@ let corePlugins = {
         ]);
     },
     container: (()=>{
-        function extractMinWidths(breakpoints) {
-            return Object.values(breakpoints !== null && breakpoints !== void 0 ? breakpoints : {
-            }).flatMap((breakpoints)=>{
-                if (typeof breakpoints === 'string') {
-                    breakpoints = {
-                        min: breakpoints
-                    };
-                }
-                if (!Array.isArray(breakpoints)) {
-                    breakpoints = [
-                        breakpoints
-                    ];
-                }
-                return breakpoints.filter((breakpoint)=>{
-                    var ref;
-                    return (breakpoint === null || breakpoint === void 0 ? void 0 : (ref = breakpoint.hasOwnProperty) === null || ref === void 0 ? void 0 : ref.call(breakpoint, 'min')) || (breakpoint === null || breakpoint === void 0 ? void 0 : breakpoint.hasOwnProperty('min-width'));
-                }).map((breakpoint)=>{
-                    var ref;
-                    return (ref = breakpoint['min-width']) !== null && ref !== void 0 ? ref : breakpoint.min;
-                });
-            });
+        function extractMinWidths(breakpoints = []) {
+            return breakpoints.flatMap((breakpoint1)=>breakpoint1.values.map((breakpoint)=>breakpoint.min
+                )
+            ).filter((v)=>v !== undefined
+            );
         }
         function mapMinWidthsToPadding(minWidths, screens, paddings) {
             if (typeof paddings === 'undefined') {
@@ -259,29 +308,28 @@ let corePlugins = {
                 });
             }
             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]
+                            });
+                        }
                     }
                 }
             }
             return mapping;
         }
         return function({ addComponents , theme  }) {
-            let screens = theme('container.screens', theme('screens'));
+            let screens = (0, _normalizeScreens).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 {
-                    };
+                    return {};
                 }
                 return {
                     paddingRight: paddingConfig.padding,
@@ -305,8 +353,7 @@ let corePlugins = {
                     }, theme('container.center', false) ? {
                         marginRight: 'auto',
                         marginLeft: 'auto'
-                    } : {
-                    }, generatePaddingFor(0))
+                    } : {}, generatePaddingFor(0))
                 },
                 ...atRules, 
             ]);
@@ -788,13 +835,12 @@ let corePlugins = {
                 [
                     [
                         '@defaults transform',
-                        {
-                        }
+                        {}
                     ],
                     '--tw-translate-x',
                     [
                         'transform',
-                        'var(--tw-transform)'
+                        cssTransformValue
                     ]
                 ], 
             ],
@@ -803,13 +849,12 @@ let corePlugins = {
                 [
                     [
                         '@defaults transform',
-                        {
-                        }
+                        {}
                     ],
                     '--tw-translate-y',
                     [
                         'transform',
-                        'var(--tw-transform)'
+                        cssTransformValue
                     ]
                 ], 
             ], 
@@ -823,16 +868,15 @@ let corePlugins = {
             [
                 [
                     '@defaults transform',
-                    {
-                    }
+                    {}
                 ],
                 '--tw-rotate',
                 [
                     'transform',
-                    'var(--tw-transform)'
+                    cssTransformValue
                 ]
-            ], 
-        ], 
+            ]
+        ]
     ], {
         supportsNegativeValues: true
     }),
@@ -843,30 +887,28 @@ let corePlugins = {
                 [
                     [
                         '@defaults transform',
-                        {
-                        }
+                        {}
                     ],
                     '--tw-skew-x',
                     [
                         'transform',
-                        'var(--tw-transform)'
+                        cssTransformValue
                     ]
-                ], 
+                ]
             ],
             [
                 'skew-y',
                 [
                     [
                         '@defaults transform',
-                        {
-                        }
+                        {}
                     ],
                     '--tw-skew-y',
                     [
                         'transform',
-                        'var(--tw-transform)'
+                        cssTransformValue
                     ]
-                ], 
+                ]
             ], 
         ], 
     ], {
@@ -878,14 +920,13 @@ let corePlugins = {
             [
                 [
                     '@defaults transform',
-                    {
-                    }
+                    {}
                 ],
                 '--tw-scale-x',
                 '--tw-scale-y',
                 [
                     'transform',
-                    'var(--tw-transform)'
+                    cssTransformValue
                 ], 
             ], 
         ],
@@ -895,13 +936,12 @@ let corePlugins = {
                 [
                     [
                         '@defaults transform',
-                        {
-                        }
+                        {}
                     ],
                     '--tw-scale-x',
                     [
                         'transform',
-                        'var(--tw-transform)'
+                        cssTransformValue
                     ]
                 ], 
             ],
@@ -910,65 +950,39 @@ let corePlugins = {
                 [
                     [
                         '@defaults transform',
-                        {
-                        }
+                        {}
                     ],
                     '--tw-scale-y',
                     [
                         'transform',
-                        'var(--tw-transform)'
+                        cssTransformValue
                     ]
                 ], 
             ], 
         ], 
-    ]),
-    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(' ')
-            }
+    ], {
+        supportsNegativeValues: true
+    }),
+    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: 'var(--tw-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'
@@ -979,8 +993,7 @@ let corePlugins = {
         let prefixName = (name)=>prefix(`.${name}`).slice(1)
         ;
         var ref;
-        let keyframes = Object.fromEntries(Object.entries((ref = theme('keyframes')) !== null && ref !== void 0 ? ref : {
-        }).map(([key, value])=>{
+        let keyframes = Object.fromEntries(Object.entries((ref = theme('keyframes')) !== null && ref !== void 0 ? ref : {}).map(([key, value])=>{
             return [
                 key,
                 {
@@ -989,8 +1002,8 @@ let corePlugins = {
             ];
         }));
         matchUtilities({
-            animate: (value)=>{
-                let animations = (0, _parseAnimationValue).default(value);
+            animate: (value1)=>{
+                let animations = (0, _parseAnimationValue).default(value1);
                 return [
                     ...animations.flatMap((animation)=>keyframes[animation.name]
                     ),
@@ -1009,7 +1022,13 @@ let corePlugins = {
         });
     },
     cursor: (0, _createUtilityPlugin).default('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'
@@ -1018,25 +1037,39 @@ let corePlugins = {
                 'touch-action': 'none'
             },
             '.touch-pan-x': {
-                'touch-action': 'pan-x'
+                '@defaults touch-action': {},
+                '--tw-pan-x': 'pan-x',
+                'touch-action': cssTouchActionValue
             },
             '.touch-pan-left': {
-                'touch-action': 'pan-left'
+                '@defaults touch-action': {},
+                '--tw-pan-x': 'pan-left',
+                'touch-action': cssTouchActionValue
             },
             '.touch-pan-right': {
-                'touch-action': 'pan-right'
+                '@defaults touch-action': {},
+                '--tw-pan-x': 'pan-right',
+                'touch-action': cssTouchActionValue
             },
             '.touch-pan-y': {
-                'touch-action': 'pan-y'
+                '@defaults touch-action': {},
+                '--tw-pan-y': 'pan-y',
+                'touch-action': cssTouchActionValue
             },
             '.touch-pan-up': {
-                'touch-action': 'pan-up'
+                '@defaults touch-action': {},
+                '--tw-pan-y': 'pan-up',
+                'touch-action': cssTouchActionValue
             },
             '.touch-pan-down': {
-                'touch-action': 'pan-down'
+                '@defaults touch-action': {},
+                '--tw-pan-y': 'pan-down',
+                'touch-action': cssTouchActionValue
             },
             '.touch-pinch-zoom': {
-                'touch-action': 'pinch-zoom'
+                '@defaults touch-action': {},
+                '--tw-pinch-zoom': 'pinch-zoom',
+                'touch-action': cssTouchActionValue
             },
             '.touch-manipulation': {
                 'touch-action': 'manipulation'
@@ -1075,29 +1108,24 @@ let corePlugins = {
             }
         });
     },
-    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({
             '.snap-none': {
                 'scroll-snap-type': 'none'
             },
             '.snap-x': {
-                '@defaults scroll-snap-type': {
-                },
+                '@defaults scroll-snap-type': {},
                 'scroll-snap-type': 'x var(--tw-scroll-snap-strictness)'
             },
             '.snap-y': {
-                '@defaults scroll-snap-type': {
-                },
+                '@defaults scroll-snap-type': {},
                 'scroll-snap-type': 'y var(--tw-scroll-snap-strictness)'
             },
             '.snap-both': {
-                '@defaults scroll-snap-type': {
-                },
+                '@defaults scroll-snap-type': {},
                 'scroll-snap-type': 'both var(--tw-scroll-snap-strictness)'
             },
             '.snap-mandatory': {
@@ -1601,8 +1629,7 @@ let corePlugins = {
                 value = value === '0' ? '0px' : value;
                 return {
                     '& > :not([hidden]) ~ :not([hidden])': {
-                        '@defaults border-width': {
-                        },
+                        '@defaults border-width': {},
                         '--tw-divide-x-reverse': '0',
                         'border-right-width': `calc(${value} * var(--tw-divide-x-reverse))`,
                         'border-left-width': `calc(${value} * calc(1 - var(--tw-divide-x-reverse)))`
@@ -1613,8 +1640,7 @@ let corePlugins = {
                 value = value === '0' ? '0px' : value;
                 return {
                     '& > :not([hidden]) ~ :not([hidden])': {
-                        '@defaults border-width': {
-                        },
+                        '@defaults border-width': {},
                         '--tw-divide-y-reverse': '0',
                         'border-top-width': `calc(${value} * calc(1 - var(--tw-divide-y-reverse)))`,
                         'border-bottom-width': `calc(${value} * var(--tw-divide-y-reverse))`
@@ -1630,13 +1656,11 @@ let corePlugins = {
         });
         addUtilities({
             '.divide-y-reverse > :not([hidden]) ~ :not([hidden])': {
-                '@defaults border-width': {
-                },
+                '@defaults border-width': {},
                 '--tw-divide-y-reverse': '1'
             },
             '.divide-x-reverse > :not([hidden]) ~ :not([hidden])': {
-                '@defaults border-width': {
-                },
+                '@defaults border-width': {},
                 '--tw-divide-x-reverse': '1'
             }
         });
@@ -1660,10 +1684,10 @@ let corePlugins = {
             }
         });
     },
-    divideColor: ({ matchUtilities , theme , corePlugins  })=>{
+    divideColor: ({ matchUtilities , theme , corePlugins: corePlugins1  })=>{
         matchUtilities({
             divide: (value)=>{
-                if (!corePlugins('divideOpacity')) {
+                if (!corePlugins1('divideOpacity')) {
                     return {
                         ['& > :not([hidden]) ~ :not([hidden])']: {
                             'border-color': (0, _toColorValue).default(value)
@@ -1968,8 +1992,7 @@ let corePlugins = {
             [
                 [
                     '@defaults border-width',
-                    {
-                    }
+                    {}
                 ],
                 'border-width'
             ]
@@ -1980,8 +2003,7 @@ let corePlugins = {
                 [
                     [
                         '@defaults border-width',
-                        {
-                        }
+                        {}
                     ],
                     'border-left-width',
                     'border-right-width'
@@ -1992,8 +2014,7 @@ let corePlugins = {
                 [
                     [
                         '@defaults border-width',
-                        {
-                        }
+                        {}
                     ],
                     'border-top-width',
                     'border-bottom-width'
@@ -2006,8 +2027,7 @@ let corePlugins = {
                 [
                     [
                         '@defaults border-width',
-                        {
-                        }
+                        {}
                     ],
                     'border-top-width'
                 ]
@@ -2017,8 +2037,7 @@ let corePlugins = {
                 [
                     [
                         '@defaults border-width',
-                        {
-                        }
+                        {}
                     ],
                     'border-right-width'
                 ]
@@ -2028,8 +2047,7 @@ let corePlugins = {
                 [
                     [
                         '@defaults border-width',
-                        {
-                        }
+                        {}
                     ],
                     'border-bottom-width'
                 ]
@@ -2039,8 +2057,7 @@ let corePlugins = {
                 [
                     [
                         '@defaults border-width',
-                        {
-                        }
+                        {}
                     ],
                     'border-left-width'
                 ]
@@ -2074,26 +2091,10 @@ let corePlugins = {
             }
         });
     },
-    borderColor: ({ addBase , matchUtilities , theme , corePlugins  })=>{
-        if (!corePlugins('borderOpacity')) {
-            let value = theme('borderColor.DEFAULT', 'currentColor');
-            addBase({
-                '@defaults border-width': {
-                    'border-color': (0, _toColorValue).default(value)
-                }
-            });
-        } else {
-            addBase({
-                '@defaults border-width': (0, _withAlphaVariable).default({
-                    color: theme('borderColor.DEFAULT', 'currentColor'),
-                    property: 'border-color',
-                    variable: '--tw-border-opacity'
-                })
-            });
-        }
+    borderColor: ({ matchUtilities , theme , corePlugins: corePlugins2  })=>{
         matchUtilities({
             border: (value)=>{
-                if (!corePlugins('borderOpacity')) {
+                if (!corePlugins2('borderOpacity')) {
                     return {
                         'border-color': (0, _toColorValue).default(value)
                     };
@@ -2113,7 +2114,7 @@ let corePlugins = {
         });
         matchUtilities({
             'border-x': (value)=>{
-                if (!corePlugins('borderOpacity')) {
+                if (!corePlugins2('borderOpacity')) {
                     return {
                         'border-left-color': (0, _toColorValue).default(value),
                         'border-right-color': (0, _toColorValue).default(value)
@@ -2129,7 +2130,7 @@ let corePlugins = {
                 });
             },
             'border-y': (value)=>{
-                if (!corePlugins('borderOpacity')) {
+                if (!corePlugins2('borderOpacity')) {
                     return {
                         'border-top-color': (0, _toColorValue).default(value),
                         'border-bottom-color': (0, _toColorValue).default(value)
@@ -2151,7 +2152,7 @@ let corePlugins = {
         });
         matchUtilities({
             'border-t': (value)=>{
-                if (!corePlugins('borderOpacity')) {
+                if (!corePlugins2('borderOpacity')) {
                     return {
                         'border-top-color': (0, _toColorValue).default(value)
                     };
@@ -2163,7 +2164,7 @@ let corePlugins = {
                 });
             },
             'border-r': (value)=>{
-                if (!corePlugins('borderOpacity')) {
+                if (!corePlugins2('borderOpacity')) {
                     return {
                         'border-right-color': (0, _toColorValue).default(value)
                     };
@@ -2175,7 +2176,7 @@ let corePlugins = {
                 });
             },
             'border-b': (value)=>{
-                if (!corePlugins('borderOpacity')) {
+                if (!corePlugins2('borderOpacity')) {
                     return {
                         'border-bottom-color': (0, _toColorValue).default(value)
                     };
@@ -2187,7 +2188,7 @@ let corePlugins = {
                 });
             },
             'border-l': (value)=>{
-                if (!corePlugins('borderOpacity')) {
+                if (!corePlugins2('borderOpacity')) {
                     return {
                         'border-left-color': (0, _toColorValue).default(value)
                     };
@@ -2212,10 +2213,10 @@ let corePlugins = {
             ]
         ], 
     ]),
-    backgroundColor: ({ matchUtilities , theme , corePlugins  })=>{
+    backgroundColor: ({ matchUtilities , theme , corePlugins: corePlugins3  })=>{
         matchUtilities({
             bg: (value)=>{
-                if (!corePlugins('backgroundOpacity')) {
+                if (!corePlugins3('backgroundOpacity')) {
                     return {
                         'background-color': (0, _toColorValue).default(value)
                     };
@@ -2296,6 +2297,12 @@ let corePlugins = {
             },
             '.decoration-clone': {
                 'box-decoration-break': 'clone'
+            },
+            '.box-decoration-slice': {
+                'box-decoration-break': 'slice'
+            },
+            '.box-decoration-clone': {
+                'box-decoration-break': 'clone'
             }
         });
     },
@@ -2595,12 +2602,10 @@ let corePlugins = {
                 };
                 return {
                     'font-size': fontSize,
-                    ...lineHeight === undefined ? {
-                    } : {
+                    ...lineHeight === undefined ? {} : {
                         'line-height': lineHeight
                     },
-                    ...letterSpacing === undefined ? {
-                    } : {
+                    ...letterSpacing === undefined ? {} : {
                         'letter-spacing': letterSpacing
                     }
                 };
@@ -2654,66 +2659,58 @@ 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': {
-                },
+                '@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': {
-                },
+                '@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': {
-                },
+                '@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': {
-                },
+                '@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': {
-                },
+                '@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': {
-                },
+                '@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': {
-                },
+                '@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': {
-                },
+                '@defaults font-variant-numeric': {},
                 '--tw-numeric-fraction': 'stacked-fractions',
-                'font-variant-numeric': 'var(--tw-font-variant-numeric)'
+                'font-variant-numeric': cssFontVariantNumericValue
             }
         });
     },
@@ -2735,10 +2732,10 @@ let corePlugins = {
     ], {
         supportsNegativeValues: true
     }),
-    textColor: ({ matchUtilities , theme , corePlugins  })=>{
+    textColor: ({ matchUtilities , theme , corePlugins: corePlugins4  })=>{
         matchUtilities({
             text: (value)=>{
-                if (!corePlugins('textOpacity')) {
+                if (!corePlugins4('textOpacity')) {
                     return {
                         color: (0, _toColorValue).default(value)
                     };
@@ -2765,13 +2762,16 @@ let corePlugins = {
     textDecoration: ({ addUtilities  })=>{
         addUtilities({
             '.underline': {
-                'text-decoration': 'underline'
+                'text-decoration-line': 'underline'
+            },
+            '.overline': {
+                'text-decoration-line': 'overline'
             },
             '.line-through': {
-                'text-decoration': 'line-through'
+                'text-decoration-line': 'line-through'
             },
             '.no-underline': {
-                'text-decoration': 'none'
+                'text-decoration-line': 'none'
             }
         });
     },
@@ -2785,11 +2785,55 @@ let corePlugins = {
         }, {
             values: (0, _flattenColorPalette).default(theme('textDecorationColor')),
             type: [
-                'color',
-                'any'
+                '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: (0, _createUtilityPlugin).default('textDecorationThickness', [
+        [
+            'decoration',
+            [
+                'text-decoration-thickness'
+            ]
+        ]
+    ], {
+        type: [
+            'length',
+            'percentage'
+        ]
+    }),
+    textUnderlineOffset: (0, _createUtilityPlugin).default('textUnderlineOffset', [
+        [
+            'underline-offset',
+            [
+                'text-underline-offset'
+            ]
+        ]
+    ], {
+        type: [
+            'length',
+            'percentage'
+        ]
+    }),
     fontSmoothing: ({ addUtilities  })=>{
         addUtilities({
             '.antialiased': {
@@ -2802,10 +2846,10 @@ let corePlugins = {
             }
         });
     },
-    placeholderColor: ({ matchUtilities , theme , corePlugins  })=>{
+    placeholderColor: ({ matchUtilities , theme , corePlugins: corePlugins5  })=>{
         matchUtilities({
             placeholder: (value)=>{
-                if (!corePlugins('placeholderOpacity')) {
+                if (!corePlugins5('placeholderOpacity')) {
                     return {
                         '&::placeholder': {
                             color: (0, _toColorValue).default(value)
@@ -2990,29 +3034,54 @@ let corePlugins = {
             `var(--tw-ring-shadow, 0 0 #0000)`,
             `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({
                 shadow: (value)=>{
                     value = transformValue(value);
+                    let ast = (0, _parseBoxShadowValue).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': {
-                        },
+                        '@defaults box-shadow': {},
                         '--tw-shadow': value === 'none' ? '0 0 #0000' : value,
+                        '--tw-shadow-colored': value === 'none' ? '0 0 #0000' : (0, _parseBoxShadowValue).formatBoxShadowValue(ast),
                         'box-shadow': defaultBoxShadow
                     };
                 }
             }, {
-                values: theme('boxShadow')
+                values: theme('boxShadow'),
+                type: [
+                    'shadow'
+                ]
             });
         };
     })(),
+    boxShadowColor: ({ matchUtilities , theme  })=>{
+        matchUtilities({
+            shadow: (value)=>{
+                return {
+                    '--tw-shadow-color': (0, _toColorValue).default(value),
+                    '--tw-shadow': 'var(--tw-shadow-colored)'
+                };
+            }
+        }, {
+            values: (0, _flattenColorPalette).default(theme('boxShadowColor')),
+            type: [
+                'color'
+            ]
+        });
+    },
     outlineStyle: ({ addUtilities  })=>{
         addUtilities({
             '.outline-none': {
@@ -3078,25 +3147,24 @@ let corePlugins = {
             ]
         });
     },
-    ringWidth: ({ matchUtilities , addBase , addUtilities , theme  })=>{
+    ringWidth: ({ matchUtilities , addDefaults , addUtilities , theme  })=>{
+        var ref;
         let ringOpacityDefault = theme('ringOpacity.DEFAULT', '0.5');
-        let ringColorDefault = (0, _withAlphaVariable).withAlphaValue(theme('ringColor.DEFAULT'), ringOpacityDefault, `rgb(147 197 253 / ${ringOpacityDefault})`);
-        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'
-            }
+        let ringColorDefault = (0, _withAlphaVariable).withAlphaValue((ref = theme('ringColor')) === null || ref === void 0 ? void 0 : ref.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({
             ring: (value)=>{
                 return {
-                    '@defaults ring-width': {
-                    },
+                    '@defaults ring-width': {},
                     '--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)`,
                     '--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(${value} + var(--tw-ring-offset-width)) var(--tw-ring-color)`,
                     'box-shadow': [
@@ -3112,15 +3180,19 @@ let corePlugins = {
         });
         addUtilities({
             '.ring-inset': {
-                '@defaults ring-width': {
-                },
+                '@defaults ring-width': {},
                 '--tw-ring-inset': 'inset'
             }
         });
     },
-    ringColor: ({ matchUtilities , theme  })=>{
+    ringColor: ({ matchUtilities , theme , corePlugins: corePlugins6  })=>{
         matchUtilities({
             ring: (value)=>{
+                if (!corePlugins6('ringOpacity')) {
+                    return {
+                        '--tw-ring-color': (0, _toColorValue).default(value)
+                    };
+                }
                 return (0, _withAlphaVariable).default({
                     color: value,
                     property: '--tw-ring-color',
@@ -3170,9 +3242,8 @@ let corePlugins = {
             blur: (value)=>{
                 return {
                     '--tw-blur': `blur(${value})`,
-                    '@defaults filter': {
-                    },
-                    filter: 'var(--tw-filter)'
+                    '@defaults filter': {},
+                    filter: cssFilterValue
                 };
             }
         }, {
@@ -3184,9 +3255,8 @@ let corePlugins = {
             brightness: (value)=>{
                 return {
                     '--tw-brightness': `brightness(${value})`,
-                    '@defaults filter': {
-                    },
-                    filter: 'var(--tw-filter)'
+                    '@defaults filter': {},
+                    filter: cssFilterValue
                 };
             }
         }, {
@@ -3198,9 +3268,8 @@ let corePlugins = {
             contrast: (value)=>{
                 return {
                     '--tw-contrast': `contrast(${value})`,
-                    '@defaults filter': {
-                    },
-                    filter: 'var(--tw-filter)'
+                    '@defaults filter': {},
+                    filter: cssFilterValue
                 };
             }
         }, {
@@ -3213,9 +3282,8 @@ let corePlugins = {
                 return {
                     '--tw-drop-shadow': Array.isArray(value) ? value.map((v)=>`drop-shadow(${v})`
                     ).join(' ') : `drop-shadow(${value})`,
-                    '@defaults filter': {
-                    },
-                    filter: 'var(--tw-filter)'
+                    '@defaults filter': {},
+                    filter: cssFilterValue
                 };
             }
         }, {
@@ -3227,9 +3295,8 @@ let corePlugins = {
             grayscale: (value)=>{
                 return {
                     '--tw-grayscale': `grayscale(${value})`,
-                    '@defaults filter': {
-                    },
-                    filter: 'var(--tw-filter)'
+                    '@defaults filter': {},
+                    filter: cssFilterValue
                 };
             }
         }, {
@@ -3241,9 +3308,8 @@ let corePlugins = {
             'hue-rotate': (value)=>{
                 return {
                     '--tw-hue-rotate': `hue-rotate(${value})`,
-                    '@defaults filter': {
-                    },
-                    filter: 'var(--tw-filter)'
+                    '@defaults filter': {},
+                    filter: cssFilterValue
                 };
             }
         }, {
@@ -3256,9 +3322,8 @@ let corePlugins = {
             invert: (value)=>{
                 return {
                     '--tw-invert': `invert(${value})`,
-                    '@defaults filter': {
-                    },
-                    filter: 'var(--tw-filter)'
+                    '@defaults filter': {},
+                    filter: cssFilterValue
                 };
             }
         }, {
@@ -3270,9 +3335,8 @@ let corePlugins = {
             saturate: (value)=>{
                 return {
                     '--tw-saturate': `saturate(${value})`,
-                    '@defaults filter': {
-                    },
-                    filter: 'var(--tw-filter)'
+                    '@defaults filter': {},
+                    filter: cssFilterValue
                 };
             }
         }, {
@@ -3284,45 +3348,30 @@ let corePlugins = {
             sepia: (value)=>{
                 return {
                     '--tw-sepia': `sepia(${value})`,
-                    '@defaults filter': {
-                    },
-                    filter: 'var(--tw-filter)'
+                    '@defaults filter': {},
+                    filter: cssFilterValue
                 };
             }
         }, {
             values: theme('sepia')
         });
     },
-    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(' ')
-            }
+    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: 'var(--tw-filter)'
+                '@defaults filter': {},
+                filter: cssFilterValue
             },
             '.filter-none': {
                 filter: 'none'
@@ -3334,9 +3383,8 @@ let corePlugins = {
             'backdrop-blur': (value)=>{
                 return {
                     '--tw-backdrop-blur': `blur(${value})`,
-                    '@defaults backdrop-filter': {
-                    },
-                    'backdrop-filter': 'var(--tw-backdrop-filter)'
+                    '@defaults backdrop-filter': {},
+                    'backdrop-filter': cssBackdropFilterValue
                 };
             }
         }, {
@@ -3348,9 +3396,8 @@ let corePlugins = {
             'backdrop-brightness': (value)=>{
                 return {
                     '--tw-backdrop-brightness': `brightness(${value})`,
-                    '@defaults backdrop-filter': {
-                    },
-                    'backdrop-filter': 'var(--tw-backdrop-filter)'
+                    '@defaults backdrop-filter': {},
+                    'backdrop-filter': cssBackdropFilterValue
                 };
             }
         }, {
@@ -3362,9 +3409,8 @@ let corePlugins = {
             'backdrop-contrast': (value)=>{
                 return {
                     '--tw-backdrop-contrast': `contrast(${value})`,
-                    '@defaults backdrop-filter': {
-                    },
-                    'backdrop-filter': 'var(--tw-backdrop-filter)'
+                    '@defaults backdrop-filter': {},
+                    'backdrop-filter': cssBackdropFilterValue
                 };
             }
         }, {
@@ -3376,9 +3422,8 @@ let corePlugins = {
             'backdrop-grayscale': (value)=>{
                 return {
                     '--tw-backdrop-grayscale': `grayscale(${value})`,
-                    '@defaults backdrop-filter': {
-                    },
-                    'backdrop-filter': 'var(--tw-backdrop-filter)'
+                    '@defaults backdrop-filter': {},
+                    'backdrop-filter': cssBackdropFilterValue
                 };
             }
         }, {
@@ -3390,9 +3435,8 @@ let corePlugins = {
             'backdrop-hue-rotate': (value)=>{
                 return {
                     '--tw-backdrop-hue-rotate': `hue-rotate(${value})`,
-                    '@defaults backdrop-filter': {
-                    },
-                    'backdrop-filter': 'var(--tw-backdrop-filter)'
+                    '@defaults backdrop-filter': {},
+                    'backdrop-filter': cssBackdropFilterValue
                 };
             }
         }, {
@@ -3405,9 +3449,8 @@ let corePlugins = {
             'backdrop-invert': (value)=>{
                 return {
                     '--tw-backdrop-invert': `invert(${value})`,
-                    '@defaults backdrop-filter': {
-                    },
-                    'backdrop-filter': 'var(--tw-backdrop-filter)'
+                    '@defaults backdrop-filter': {},
+                    'backdrop-filter': cssBackdropFilterValue
                 };
             }
         }, {
@@ -3419,9 +3462,8 @@ let corePlugins = {
             'backdrop-opacity': (value)=>{
                 return {
                     '--tw-backdrop-opacity': `opacity(${value})`,
-                    '@defaults backdrop-filter': {
-                    },
-                    'backdrop-filter': 'var(--tw-backdrop-filter)'
+                    '@defaults backdrop-filter': {},
+                    'backdrop-filter': cssBackdropFilterValue
                 };
             }
         }, {
@@ -3433,9 +3475,8 @@ let corePlugins = {
             'backdrop-saturate': (value)=>{
                 return {
                     '--tw-backdrop-saturate': `saturate(${value})`,
-                    '@defaults backdrop-filter': {
-                    },
-                    'backdrop-filter': 'var(--tw-backdrop-filter)'
+                    '@defaults backdrop-filter': {},
+                    'backdrop-filter': cssBackdropFilterValue
                 };
             }
         }, {
@@ -3447,45 +3488,30 @@ let corePlugins = {
             'backdrop-sepia': (value)=>{
                 return {
                     '--tw-backdrop-sepia': `sepia(${value})`,
-                    '@defaults backdrop-filter': {
-                    },
-                    'backdrop-filter': 'var(--tw-backdrop-filter)'
+                    '@defaults backdrop-filter': {},
+                    'backdrop-filter': cssBackdropFilterValue
                 };
             }
         }, {
             values: theme('backdropSepia')
         });
     },
-    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)'
+                '@defaults backdrop-filter': {},
+                'backdrop-filter': cssBackdropFilterValue
             },
             '.backdrop-filter-none': {
                 'backdrop-filter': 'none'
@@ -3499,8 +3525,7 @@ let corePlugins = {
             transition: (value)=>{
                 return {
                     'transition-property': value,
-                    ...value === 'none' ? {
-                    } : {
+                    ...value === 'none' ? {} : {
                         'transition-timing-function': defaultTimingFunction,
                         'transition-duration': defaultDuration
                     }