tailwindcss 3.0.0 → 3.0.4

package/colors.js

@@ -1 +1,2 @@
-module.exports = require('./lib/public/colors').default
+let colors = require('./lib/public/colors')
+module.exports = (colors.__esModule ? colors : { default: colors }).default

package/defaultConfig.js

@@ -1 +1,2 @@
-module.exports = require('./lib/public/default-config').default
+let defaultConfig = require('./lib/public/default-config')
+module.exports = (defaultConfig.__esModule ? defaultConfig : { default: defaultConfig }).default

package/defaultTheme.js

@@ -1 +1,2 @@
-module.exports = require('./lib/public/default-theme').default
+let defaultTheme = require('./lib/public/default-theme')
+module.exports = (defaultTheme.__esModule ? defaultTheme : { default: defaultTheme }).default

package/lib/corePlugins.js

@@ -914,26 +914,24 @@ let corePlugins = {
     ], {
         supportsNegativeValues: true
     }),
-    transform: ({ addBase , addUtilities  })=>{
-        addBase({
-            '@defaults transform': {
-                '--tw-translate-x': '0',
-                '--tw-translate-y': '0',
-                '--tw-rotate': '0',
-                '--tw-skew-x': '0',
-                '--tw-skew-y': '0',
-                '--tw-scale-x': '1',
-                '--tw-scale-y': '1',
-                '--tw-transform': [
-                    'translateX(var(--tw-translate-x))',
-                    'translateY(var(--tw-translate-y))',
-                    'rotate(var(--tw-rotate))',
-                    'skewX(var(--tw-skew-x))',
-                    'skewY(var(--tw-skew-y))',
-                    'scaleX(var(--tw-scale-x))',
-                    'scaleY(var(--tw-scale-y))', 
-                ].join(' ')
-            }
+    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',
+            '--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': {
@@ -1001,14 +999,12 @@ let corePlugins = {
         });
     },
     cursor: (0, _createUtilityPlugin).default('cursor'),
-    touchAction: ({ addBase , addUtilities  })=>{
-        addBase({
-            '@defaults 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)'
-            }
+    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)'
         });
         addUtilities({
             '.touch-auto': {
@@ -1096,11 +1092,9 @@ 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': {
@@ -2095,22 +2089,18 @@ let corePlugins = {
             }
         });
     },
-    borderColor: ({ addBase , matchUtilities , theme , corePlugins: corePlugins2  })=>{
+    borderColor: ({ addDefaults , matchUtilities , theme , corePlugins: corePlugins2  })=>{
         if (!corePlugins2('borderOpacity')) {
             let value = theme('borderColor.DEFAULT', 'currentColor');
-            addBase({
-                '@defaults border-width': {
-                    'border-color': (0, _toColorValue).default(value)
-                }
+            addDefaults('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'
-                })
-            });
+            addDefaults('border-width', (0, _withAlphaVariable).default({
+                color: theme('borderColor.DEFAULT', 'currentColor'),
+                property: 'border-color',
+                variable: '--tw-border-opacity'
+            }));
         }
         matchUtilities({
             border: (value)=>{
@@ -2792,16 +2782,16 @@ let corePlugins = {
     textDecoration: ({ addUtilities  })=>{
         addUtilities({
             '.underline': {
-                'text-decoration': 'underline'
+                'text-decoration-line': 'underline'
             },
             '.overline': {
-                'text-decoration': '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'
             }
         });
     },
@@ -3064,14 +3054,12 @@ 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',
-                    '--tw-shadow-colored': '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)=>{
@@ -3180,20 +3168,18 @@ let corePlugins = {
             ]
         });
     },
-    ringWidth: ({ matchUtilities , addBase , addUtilities , theme  })=>{
+    ringWidth: ({ matchUtilities , addDefaults , addUtilities , theme  })=>{
         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',
-                '--tw-shadow-colored': '0 0 #0000'
-            }
+        addDefaults('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',
+            '--tw-shadow-colored': '0 0 #0000'
         });
         matchUtilities({
             ring: (value)=>{
@@ -3396,30 +3382,28 @@ let corePlugins = {
             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': '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': {
@@ -3559,30 +3543,28 @@ let corePlugins = {
             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': '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(' ')
         });
         addUtilities({
             '.backdrop-filter': {

package/lib/css/preflight.css

@@ -144,7 +144,7 @@ sup {
 table {
   text-indent: 0; /* 1 */
   border-color: inherit; /* 2 */
-  border-collapse: collapse;  /* 3 */
+  border-collapse: collapse; /* 3 */
 }
 
 /*
@@ -289,6 +289,7 @@ legend {
 
 ol,
 ul,
+li,
 menu {
   list-style: none;
   margin: 0;
@@ -310,7 +311,7 @@ textarea {
 
 input::placeholder,
 textarea::placeholder {
-  opacity: 1;  /* 1 */
+  opacity: 1; /* 1 */
   color: theme('colors.gray.400', #9ca3af); /* 2 */
 }
 

package/lib/featureFlags.js

@@ -13,7 +13,9 @@ function _interopRequireDefault(obj) {
     };
 }
 let defaults = {
-    optimizeUniversalDefaults: true
+    // TODO: Drop this once we can safely rely on optimizeUniversalDefaults being
+    // the default.
+    optimizeUniversalDefaults: process.env.NODE_ENV === 'test' ? true : false
 };
 let featureFlags = {
     future: [],

package/lib/lib/expandApplyAtRules.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = expandApplyAtRules;
 var _postcss = _interopRequireDefault(require("postcss"));
+var _postcssSelectorParser = _interopRequireDefault(require("postcss-selector-parser"));
 var _generateRules = require("./generateRules");
 var _bigSign = _interopRequireDefault(require("../util/bigSign"));
 var _escapeClassName = _interopRequireDefault(require("../util/escapeClassName"));
@@ -12,6 +13,18 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
+function containsBase(selector, classCandidateBase, separator) {
+    return (0, _postcssSelectorParser).default((selectors)=>{
+        let contains = false;
+        selectors.walkClasses((classSelector)=>{
+            if (classSelector.value.split(separator).pop() === classCandidateBase) {
+                contains = true;
+                return false;
+            }
+        });
+        return contains;
+    }).transformSync(selector);
+}
 function prefix(context, selector) {
     let prefix1 = context.tailwindConfig.prefix;
     return typeof prefix1 === 'function' ? prefix1(selector) : prefix1 + selector;
@@ -127,8 +140,8 @@ function processApply(root, context) {
      */ // TODO: Should we use postcss-selector-parser for this instead?
         function replaceSelector(selector, utilitySelectors, candidate) {
             let needle = `.${(0, _escapeClassName).default(candidate)}`;
-            let utilitySelectorsList = utilitySelectors.split(/\s*,\s*/g);
-            return selector.split(/\s*,\s*/g).map((s)=>{
+            let utilitySelectorsList = utilitySelectors.split(/\s*\,(?![^(]*\))\s*/g);
+            return selector.split(/\s*\,(?![^(]*\))\s*/g).map((s)=>{
                 let replaced = [];
                 for (let utilitySelector of utilitySelectorsList){
                     let replacedSelector = utilitySelector.replace(needle, s);
@@ -173,7 +186,11 @@ function processApply(root, context) {
         for (const [parent, candidates] of perParentApplies){
             let siblings = [];
             for (let [applyCandidate, important, rules] of candidates){
+                let base = applyCandidate.split(context.tailwindConfig.separator).pop();
                 for (let [meta, node] of rules){
+                    if (containsBase(parent.selector, base, context.tailwindConfig.separator) && containsBase(node.selector, base, context.tailwindConfig.separator)) {
+                        throw node.error(`Circular dependency detected when using: \`@apply ${applyCandidate}\``);
+                    }
                     let root = _postcss.default.root({
                         nodes: [
                             node.clone()

package/lib/lib/expandTailwindAtRules.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.default = expandTailwindAtRules;
+exports.DEFAULTS_LAYER = void 0;
 var _quickLru = _interopRequireDefault(require("quick-lru"));
 var sharedState = _interopRequireWildcard(require("./sharedState"));
 var _generateRules = require("./generateRules");
@@ -112,6 +113,7 @@ function buildStylesheet(rules, context) {
     );
     let returnValue = {
         base: new Set(),
+        defaults: new Set(),
         components: new Set(),
         utilities: new Set(),
         variants: new Set(),
@@ -134,6 +136,10 @@ function buildStylesheet(rules, context) {
             returnValue.base.add(rule);
             continue;
         }
+        if (sort & context.layerOrder.defaults) {
+            returnValue.defaults.add(rule);
+            continue;
+        }
         if (sort & context.layerOrder.components) {
             returnValue.components.add(rule);
             continue;
@@ -149,6 +155,8 @@ function buildStylesheet(rules, context) {
     }
     return returnValue;
 }
+const DEFAULTS_LAYER = Symbol('defaults-layer');
+exports.DEFAULTS_LAYER = DEFAULTS_LAYER;
 function expandTailwindAtRules(context) {
     return (root)=>{
         let layerNodes = {
@@ -199,13 +207,29 @@ function expandTailwindAtRules(context) {
             ], context);
         }
         env.DEBUG && console.timeEnd('Build stylesheet');
-        let { base: baseNodes , components: componentNodes , utilities: utilityNodes , variants: screenNodes ,  } = context.stylesheetCache;
+        let { defaults: defaultNodes , base: baseNodes , components: componentNodes , utilities: utilityNodes , variants: screenNodes ,  } = context.stylesheetCache;
         // ---
         // Replace any Tailwind directives with generated CSS
         if (layerNodes.base) {
             layerNodes.base.before((0, _cloneNodes).default([
                 ...baseNodes
             ], layerNodes.base.source));
+        }
+        // @defaults rules are unconditionally added first to ensure that
+        // using any utility that relies on defaults will work even when
+        // compiled in an isolated environment like CSS modules
+        if (context.tailwindConfig[DEFAULTS_LAYER] !== false) {
+            if (layerNodes.base) {
+                layerNodes.base.after((0, _cloneNodes).default([
+                    ...defaultNodes
+                ], root.source));
+            } else {
+                root.prepend((0, _cloneNodes).default([
+                    ...defaultNodes
+                ], root.source));
+            }
+        }
+        if (layerNodes.base) {
             layerNodes.base.remove();
         }
         if (layerNodes.components) {

package/lib/lib/generateRules.js

@@ -253,14 +253,32 @@ function parseRules(rule, cache, options = {
         options
     ];
 }
+const IS_VALID_PROPERTY_NAME = /^[a-z_-]/;
+function isValidPropName(name) {
+    return IS_VALID_PROPERTY_NAME.test(name);
+}
+function isParsableCssValue(property, value) {
+    try {
+        _postcss.default.parse(`a{${property}:${value}}`).toResult();
+        return true;
+    } catch (err) {
+        return false;
+    }
+}
 function extractArbitraryProperty(classCandidate, context) {
     var ref;
     let [, property, value] = (ref = classCandidate.match(/^\[([a-zA-Z0-9-_]+):(\S+)\]$/)) !== null && ref !== void 0 ? ref : [];
     if (value === undefined) {
         return null;
     }
+    if (!isValidPropName(property)) {
+        return null;
+    }
+    if (!(0, _isValidArbitraryValue).default(value)) {
+        return null;
+    }
     let normalized = (0, _dataTypes).normalize(value);
-    if (!(0, _isValidArbitraryValue).default(normalized)) {
+    if (!isParsableCssValue(property, normalized)) {
         return null;
     }
     return [

package/lib/lib/resolveDefaultsAtRules.js

@@ -79,7 +79,7 @@ function extractElementSelector(selector) {
 function resolveDefaultsAtRules({ tailwindConfig  }) {
     return (root)=>{
         let variableNodeMap = new Map();
-        let universals = new Set();
+        /** @type {Set<import('postcss').AtRule>} */ let universals = new Set();
         root.walkAtRules('defaults', (rule)=>{
             if (rule.nodes && rule.nodes.length > 0) {
                 universals.add(rule);
@@ -93,32 +93,46 @@ function resolveDefaultsAtRules({ tailwindConfig  }) {
             rule.remove();
         });
         for (let universal of universals){
-            let selectors = new Set();
+            /** @type {Map<string, Set<string>>} */ let selectorGroups = new Map();
             var ref;
             let rules = (ref = variableNodeMap.get(universal.params)) !== null && ref !== void 0 ? ref : [];
             for (let rule of rules){
                 for (let selector of extractElementSelector(rule.selector)){
+                    // If selector contains a vendor prefix after a pseudo element or class,
+                    // we consider them separately because merging the declarations into
+                    // a single rule will cause browsers that do not understand the
+                    // vendor prefix to throw out the whole rule
+                    let selectorGroupName = selector.includes(':-') || selector.includes('::-') ? selector : '__DEFAULT__';
+                    var ref1;
+                    let selectors = (ref1 = selectorGroups.get(selectorGroupName)) !== null && ref1 !== void 0 ? ref1 : new Set();
+                    selectorGroups.set(selectorGroupName, selectors);
                     selectors.add(selector);
                 }
             }
-            if (selectors.size === 0) {
+            if (selectorGroups.size === 0) {
                 universal.remove();
                 continue;
             }
-            let universalRule = _postcss.default.rule();
             if ((0, _featureFlags).flagEnabled(tailwindConfig, 'optimizeUniversalDefaults')) {
-                universalRule.selectors = [
-                    ...selectors
-                ];
+                for (let [, selectors] of selectorGroups){
+                    let universalRule = _postcss.default.rule();
+                    universalRule.selectors = [
+                        ...selectors
+                    ];
+                    universalRule.append(universal.nodes.map((node)=>node.clone()
+                    ));
+                    universal.before(universalRule);
+                }
             } else {
+                let universalRule = _postcss.default.rule();
                 universalRule.selectors = [
                     '*',
                     '::before',
                     '::after'
                 ];
+                universalRule.append(universal.nodes);
+                universal.before(universalRule);
             }
-            universalRule.append(universal.nodes);
-            universal.before(universalRule);
             universal.remove();
         }
     };

package/lib/lib/setupContextUtils.js

@@ -271,6 +271,29 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
                 ]);
             }
         },
+        /**
+     * @param {string} group
+     * @param {Record<string, string | string[]>} declarations
+     */ addDefaults (group, declarations) {
+            const groups = {
+                [`@defaults ${group}`]: declarations
+            };
+            for (let [identifier, rule] of withIdentifiers(groups)){
+                let prefixedIdentifier = prefixIdentifier(identifier, {
+                });
+                let offset = offsets.base++;
+                if (!context.candidateRuleMap.has(prefixedIdentifier)) {
+                    context.candidateRuleMap.set(prefixedIdentifier, []);
+                }
+                context.candidateRuleMap.get(prefixedIdentifier).push([
+                    {
+                        sort: offset,
+                        layer: 'defaults'
+                    },
+                    rule
+                ]);
+            }
+        },
         addComponents (components, options) {
             let defaultOptions = {
                 respectPrefix: true,
@@ -562,6 +585,7 @@ function registerPlugins(plugins, context) {
     let variantList = [];
     let variantMap = new Map();
     let offsets = {
+        defaults: 0n,
         base: 0n,
         components: 0n,
         utilities: 0n,
@@ -587,6 +611,7 @@ function registerPlugins(plugins, context) {
         )
     )([
         offsets.base,
+        offsets.defaults,
         offsets.components,
         offsets.utilities,
         offsets.user, 
@@ -596,12 +621,13 @@ function registerPlugins(plugins, context) {
     // so arbitrary properties are always sorted at the end.
     context.arbitraryPropertiesSort = (1n << reservedBits << 0n) - 1n;
     context.layerOrder = {
-        base: 1n << reservedBits << 0n,
-        components: 1n << reservedBits << 1n,
-        utilities: 1n << reservedBits << 2n,
-        user: 1n << reservedBits << 3n
+        defaults: 1n << reservedBits << 0n,
+        base: 1n << reservedBits << 1n,
+        components: 1n << reservedBits << 2n,
+        utilities: 1n << reservedBits << 3n,
+        user: 1n << reservedBits << 4n
     };
-    reservedBits += 4n;
+    reservedBits += 5n;
     let offset = 0;
     context.variantOrder = new Map(variantList.map((variant, i)=>{
         let variantFunctions = variantMap.get(variant).length;
@@ -652,9 +678,17 @@ function registerPlugins(plugins, context) {
                 let utils = Array.isArray(util) ? (()=>{
                     let [utilName, options] = util;
                     var ref;
-                    return Object.keys((ref = options === null || options === void 0 ? void 0 : options.values) !== null && ref !== void 0 ? ref : {
+                    let classes = Object.keys((ref = options === null || options === void 0 ? void 0 : options.values) !== null && ref !== void 0 ? ref : {
                     }).map((value)=>(0, _nameClass).formatClass(utilName, value)
                     );
+                    if (options === null || options === void 0 ? void 0 : options.supportsNegativeValues) {
+                        classes = [
+                            ...classes,
+                            ...classes.map((cls)=>'-' + cls
+                            )
+                        ];
+                    }
+                    return classes;
                 })() : [
                     util
                 ];