tailwindcss 0.0.0-insiders.8259dfd → 0.0.0-insiders.8293c2d

package/lib/css/preflight.css

@@ -9,7 +9,12 @@
   box-sizing: border-box; /* 1 */
   border-width: 0; /* 2 */
   border-style: solid; /* 2 */
-  border-color: currentColor; /* 2 */
+  border-color: theme('borderColor.DEFAULT', 'currentColor'); /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
 }
 
 /*
@@ -53,7 +58,7 @@ hr {
 Add the correct text decoration in Chrome, Edge, and Safari.
 */
 
-abbr[title] {
+abbr:where([title]) {
   text-decoration: underline dotted;
 }
 
@@ -139,7 +144,7 @@ sup {
 table {
   text-indent: 0; /* 1 */
   border-color: inherit; /* 2 */
-  border-collapse: collapse;  /* 3 */
+  border-collapse: collapse; /* 3 */
 }
 
 /*
@@ -283,7 +288,8 @@ legend {
 }
 
 ol,
-ul {
+ul,
+menu {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -304,7 +310,7 @@ textarea {
 
 input::placeholder,
 textarea::placeholder {
-  opacity: 1;  /* 1 */
+  opacity: 1; /* 1 */
   color: theme('colors.gray.400', #9ca3af); /* 2 */
 }
 
@@ -317,6 +323,13 @@ button,
   cursor: pointer;
 }
 
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+:disabled {
+  cursor: default;
+}
+
 /*
 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)

package/lib/featureFlags.js

@@ -13,7 +13,7 @@ function _interopRequireDefault(obj) {
     };
 }
 let defaults = {
-    optimizeUniversalDefaults: true
+    optimizeUniversalDefaults: false
 };
 let featureFlags = {
     future: [],
@@ -28,9 +28,9 @@ function flagEnabled(config, flag) {
         return config.future === 'all' || ((ref2 = (ref1 = config === null || config === void 0 ? void 0 : (ref = config.future) === null || ref === void 0 ? void 0 : ref[flag]) !== null && ref1 !== void 0 ? ref1 : defaults[flag]) !== null && ref2 !== void 0 ? ref2 : false);
     }
     if (featureFlags.experimental.includes(flag)) {
-        var ref;
-        var ref11, ref12;
-        return config.experimental === 'all' || ((ref12 = (ref11 = config === null || config === void 0 ? void 0 : (ref = config.experimental) === null || ref === void 0 ? void 0 : ref[flag]) !== null && ref11 !== void 0 ? ref11 : defaults[flag]) !== null && ref12 !== void 0 ? ref12 : false);
+        var ref3;
+        var ref4, ref5;
+        return config.experimental === 'all' || ((ref5 = (ref4 = config === null || config === void 0 ? void 0 : (ref3 = config.experimental) === null || ref3 === void 0 ? void 0 : ref3[flag]) !== null && ref4 !== void 0 ? ref4 : defaults[flag]) !== null && ref5 !== void 0 ? ref5 : false);
     }
     return false;
 }
@@ -39,8 +39,7 @@ function experimentalFlagsEnabled(config) {
         return featureFlags.experimental;
     }
     var ref;
-    return Object.keys((ref = config === null || config === void 0 ? void 0 : config.experimental) !== null && ref !== void 0 ? ref : {
-    }).filter((flag)=>featureFlags.experimental.includes(flag) && config.experimental[flag]
+    return Object.keys((ref = config === null || config === void 0 ? void 0 : config.experimental) !== null && ref !== void 0 ? ref : {}).filter((flag)=>featureFlags.experimental.includes(flag) && config.experimental[flag]
     );
 }
 function issueFlagNotices(config) {

package/lib/index.js

@@ -1,6 +1,5 @@
 "use strict";
 var _setupTrackingContext = _interopRequireDefault(require("./lib/setupTrackingContext"));
-var _setupWatchingContext = _interopRequireDefault(require("./lib/setupWatchingContext"));
 var _processTailwindFeatures = _interopRequireDefault(require("./processTailwindFeatures"));
 var _sharedState = require("./lib/sharedState");
 function _interopRequireDefault(obj) {
@@ -18,8 +17,7 @@ module.exports = function tailwindcss(configOrPath) {
                 return root;
             },
             function(root, result) {
-                let setupContext = _sharedState.env.TAILWIND_MODE === 'watch' ? (0, _setupWatchingContext).default(configOrPath) : (0, _setupTrackingContext).default(configOrPath);
-                (0, _processTailwindFeatures).default(setupContext)(root, result);
+                (0, _processTailwindFeatures).default((0, _setupTrackingContext).default(configOrPath))(root, result);
             },
             _sharedState.env.DEBUG && function(root) {
                 console.timeEnd('JIT TOTAL');

package/lib/lib/collapseDuplicateDeclarations.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.default = collapseDuplicateDeclarations;
+function collapseDuplicateDeclarations() {
+    return (root)=>{
+        root.walkRules((node)=>{
+            let seen = new Map();
+            let droppable = new Set([]);
+            let byProperty = new Map();
+            node.walkDecls((decl)=>{
+                // This could happen if we have nested selectors. In that case the
+                // parent will loop over all its declarations but also the declarations
+                // of nested rules. With this we ensure that we are shallowly checking
+                // declarations.
+                if (decl.parent !== node) {
+                    return;
+                }
+                if (seen.has(decl.prop)) {
+                    // Exact same value as what we have seen so far
+                    if (seen.get(decl.prop).value === decl.value) {
+                        // Keep the last one, drop the one we've seen so far
+                        droppable.add(seen.get(decl.prop));
+                        // Override the existing one with the new value. This is necessary
+                        // so that if we happen to have more than one declaration with the
+                        // same value, that we keep removing the previous one. Otherwise we
+                        // will only remove the *first* one.
+                        seen.set(decl.prop, decl);
+                        return;
+                    }
+                    // Not the same value, so we need to check if we can merge it so
+                    // let's collect it first.
+                    if (!byProperty.has(decl.prop)) {
+                        byProperty.set(decl.prop, new Set());
+                    }
+                    byProperty.get(decl.prop).add(seen.get(decl.prop));
+                    byProperty.get(decl.prop).add(decl);
+                }
+                seen.set(decl.prop, decl);
+            });
+            // Drop all the duplicate declarations with the exact same value we've
+            // already seen so far.
+            for (let decl1 of droppable){
+                decl1.remove();
+            }
+            // Analyze the declarations based on its unit, drop all the declarations
+            // with the same unit but the last one in the list.
+            for (let declarations of byProperty.values()){
+                let byUnit = new Map();
+                for (let decl of declarations){
+                    let unit = resolveUnit(decl.value);
+                    if (unit === null) {
+                        continue;
+                    }
+                    if (!byUnit.has(unit)) {
+                        byUnit.set(unit, new Set());
+                    }
+                    byUnit.get(unit).add(decl);
+                }
+                for (let declarations1 of byUnit.values()){
+                    // Get all but the last one
+                    let removableDeclarations = Array.from(declarations1).slice(0, -1);
+                    for (let decl of removableDeclarations){
+                        decl.remove();
+                    }
+                }
+            }
+        });
+    };
+}
+let UNITLESS_NUMBER = Symbol('unitless-number');
+function resolveUnit(input) {
+    let result = /^-?\d*.?\d+([\w%]+)?$/g.exec(input);
+    if (result) {
+        var ref;
+        return (ref = result[1]) !== null && ref !== void 0 ? ref : UNITLESS_NUMBER;
+    }
+    return null;
+}

package/lib/lib/defaultExtractor.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.defaultExtractor = defaultExtractor;
+const PATTERNS = [
+    /(?:\['([^'\s]+[^<>"'`\s:\\])')/.source,
+    /(?:\["([^"\s]+[^<>"'`\s:\\])")/.source,
+    /(?:\[`([^`\s]+[^<>"'`\s:\\])`)/.source,
+    /([^<>"'`\s]*\[\w*'[^"`\s]*'?\])/.source,
+    /([^<>"'`\s]*\[\w*"[^'`\s]*"?\])/.source,
+    /([^<>"'`\s]*\[\w*\('[^"'`\s]*'\)\])/.source,
+    /([^<>"'`\s]*\[\w*\("[^"'`\s]*"\)\])/.source,
+    /([^<>"'`\s]*\[\w*\('[^"`\s]*'\)\])/.source,
+    /([^<>"'`\s]*\[\w*\("[^'`\s]*"\)\])/.source,
+    /([^<>"'`\s]*\['[^"'`\s]*'\])/.source,
+    /([^<>"'`\s]*\["[^"'`\s]*"\])/.source,
+    /([^<>"'`\s]*\[[^<>"'`\s]*:[^\]\s]*\])/.source,
+    /([^<>"'`\s]*\[[^<>"'`\s]*:'[^"'`\s]*'\])/.source,
+    /([^<>"'`\s]*\[[^<>"'`\s]*:"[^"'`\s]*"\])/.source,
+    /([^<>"'`\s]*\[[^"'`\s]+\][^<>"'`\s]*)/.source,
+    /([^"'`\s]*[^<>"'`\s:\\])/.source,
+    /([^<>"'`\s]*[^"'`\s:\\])/.source, 
+].join('|');
+const BROAD_MATCH_GLOBAL_REGEXP = new RegExp(PATTERNS, 'g');
+const INNER_MATCH_GLOBAL_REGEXP = /[^<>"'`\s.(){}[\]#=%$]*[^<>"'`\s.(){}[\]#=%:$]/g;
+function defaultExtractor(content) {
+    let broadMatches = content.matchAll(BROAD_MATCH_GLOBAL_REGEXP);
+    let innerMatches = content.match(INNER_MATCH_GLOBAL_REGEXP) || [];
+    let results = [
+        ...broadMatches,
+        ...innerMatches
+    ].flat().filter((v)=>v !== undefined
+    );
+    return results;
+} // Regular utilities
+ // {{modifier}:}*{namespace}{-{suffix}}*{/{opacityModifier}}?
+ // Arbitrary values
+ // {{modifier}:}*{namespace}-[{arbitraryValue}]{/{opacityModifier}}?
+ // arbitraryValue: no whitespace, balanced quotes unless within quotes, balanced brackets unless within quotes
+ // Arbitrary properties
+ // {{modifier}:}*[{validCssPropertyName}:{arbitraryValue}]

package/lib/lib/detectNesting.js

@@ -6,12 +6,27 @@ exports.default = _default;
 function _default(_context) {
     return (root, result)=>{
         let found = false;
+        root.walkAtRules('tailwind', (node)=>{
+            if (found) return false;
+            if (node.parent && node.parent.type !== 'root') {
+                found = true;
+                node.warn(result, [
+                    'Nested @tailwind rules were detected, but are not supported.',
+                    "Consider using a prefix to scope Tailwind's classes: https://tailwindcss.com/docs/configuration#prefix",
+                    'Alternatively, use the important selector strategy: https://tailwindcss.com/docs/configuration#selector-strategy', 
+                ].join('\n'));
+                return false;
+            }
+        });
         root.walkRules((rule)=>{
             if (found) return false;
             rule.walkRules((nestedRule)=>{
                 found = true;
-                nestedRule.warn(result, // TODO: Improve this warning message
-                'Nested CSS detected, checkout the docs on how to support nesting: https://tailwindcss.com/docs/using-with-preprocessors#nesting');
+                nestedRule.warn(result, [
+                    'Nested CSS was detected, but CSS nesting has not been configured correctly.',
+                    'Please enable a CSS nesting plugin *before* Tailwind in your configuration.',
+                    'See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting', 
+                ].join('\n'));
                 return false;
             });
         });

package/lib/lib/evaluateTailwindFunctions.js

@@ -7,6 +7,7 @@ var _dlv = _interopRequireDefault(require("dlv"));
 var _didyoumean = _interopRequireDefault(require("didyoumean"));
 var _transformThemeValue = _interopRequireDefault(require("../util/transformThemeValue"));
 var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
+var _normalizeScreens = require("../util/normalizeScreens");
 var _buildMediaQuery = _interopRequireDefault(require("../util/buildMediaQuery"));
 var _toPath = require("../util/toPath");
 function _interopRequireDefault(obj) {
@@ -42,7 +43,7 @@ function listKeys(obj) {
 function validatePath(config, path, defaultValue) {
     const pathString = Array.isArray(path) ? pathToString(path) : path.replace(/^['"]+/g, '').replace(/['"]+$/g, '');
     const pathSegments = Array.isArray(path) ? path : (0, _toPath).toPath(pathString);
-    const value = (0, _dlv).default(config.theme, pathString, defaultValue);
+    const value = (0, _dlv).default(config.theme, pathSegments, defaultValue);
     if (value === undefined) {
         let error = `'${pathString}' does not exist in your theme config.`;
         const parentSegments = pathSegments.slice(0, -1);
@@ -112,11 +113,11 @@ function extractArgs(node, vNodes, functions) {
     let args = [
         ''
     ];
-    for (let vNode of vNodes){
-        if (vNode.type === 'div' && vNode.value === ',') {
+    for (let vNode1 of vNodes){
+        if (vNode1.type === 'div' && vNode1.value === ',') {
             args.push('');
         } else {
-            args[args.length - 1] += _postcssValueParser.default.stringify(vNode);
+            args[args.length - 1] += _postcssValueParser.default.stringify(vNode1);
         }
     }
     return args;
@@ -149,10 +150,13 @@ function _default({ tailwindConfig: config  }) {
         },
         screen: (node, screen)=>{
             screen = screen.replace(/^['"]+/g, '').replace(/['"]+$/g, '');
-            if (config.theme.screens[screen] === undefined) {
+            let screens = (0, _normalizeScreens).normalizeScreens(config.theme.screens);
+            let screenDefinition = screens.find(({ name  })=>name === screen
+            );
+            if (!screenDefinition) {
                 throw node.error(`The '${screen}' screen does not exist in your theme.`);
             }
-            return (0, _buildMediaQuery).default(config.theme.screens[screen]);
+            return (0, _buildMediaQuery).default(screenDefinition);
         }
     };
     return (root)=>{

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,9 +13,32 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
+function extractClasses(node) {
+    let classes = new Set();
+    let container = _postcss.default.root({
+        nodes: [
+            node.clone()
+        ]
+    });
+    container.walkRules((rule)=>{
+        (0, _postcssSelectorParser).default((selectors)=>{
+            selectors.walkClasses((classSelector)=>{
+                classes.add(classSelector.value);
+            });
+        }).processSync(rule.selector);
+    });
+    return Array.from(classes);
+}
+function extractBaseCandidates(candidates, separator) {
+    let baseClasses = new Set();
+    for (let candidate of candidates){
+        baseClasses.add(candidate.split(separator).pop());
+    }
+    return Array.from(baseClasses);
+}
 function prefix(context, selector) {
-    let prefix = context.tailwindConfig.prefix;
-    return typeof prefix === 'function' ? prefix(selector) : prefix + selector;
+    let prefix1 = context.tailwindConfig.prefix;
+    return typeof prefix1 === 'function' ? prefix1(selector) : prefix1 + selector;
 }
 function buildApplyCache(applyCandidates, context) {
     for (let candidate of applyCandidates){
@@ -51,45 +75,6 @@ function extractApplyCandidates(params) {
         false
     ];
 }
-function partitionApplyParents(root) {
-    let applyParents = new Set();
-    root.walkAtRules('apply', (rule)=>{
-        applyParents.add(rule.parent);
-    });
-    for (let rule of applyParents){
-        let nodeGroups = [];
-        let lastGroup = [];
-        for (let node of rule.nodes){
-            if (node.type === 'atrule' && node.name === 'apply') {
-                if (lastGroup.length > 0) {
-                    nodeGroups.push(lastGroup);
-                    lastGroup = [];
-                }
-                nodeGroups.push([
-                    node
-                ]);
-            } else {
-                lastGroup.push(node);
-            }
-        }
-        if (lastGroup.length > 0) {
-            nodeGroups.push(lastGroup);
-        }
-        if (nodeGroups.length === 1) {
-            continue;
-        }
-        for (let group of [
-            ...nodeGroups
-        ].reverse()){
-            let newParent = rule.clone({
-                nodes: []
-            });
-            newParent.append(group);
-            rule.after(newParent);
-        }
-        rule.remove();
-    }
-}
 function processApply(root, context) {
     let applyCandidates = new Set();
     // Collect all @apply rules and candidates
@@ -127,8 +112,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);
@@ -174,6 +159,36 @@ function processApply(root, context) {
             let siblings = [];
             for (let [applyCandidate, important, rules] of candidates){
                 for (let [meta, node] of rules){
+                    let parentClasses = extractClasses(parent);
+                    let nodeClasses = extractClasses(node);
+                    // Add base utility classes from the @apply node to the list of
+                    // classes to check whether it intersects and therefore results in a
+                    // circular dependency or not.
+                    //
+                    // E.g.:
+                    // .foo {
+                    //   @apply hover:a; // This applies "a" but with a modifier
+                    // }
+                    //
+                    // We only have to do that with base classes of the `node`, not of the `parent`
+                    // E.g.:
+                    // .hover\:foo {
+                    //   @apply bar;
+                    // }
+                    // .bar {
+                    //   @apply foo;
+                    // }
+                    //
+                    // This should not result in a circular dependency because we are
+                    // just applying `.foo` and the rule above is `.hover\:foo` which is
+                    // unrelated. However, if we were to apply `hover:foo` then we _did_
+                    // have to include this one.
+                    nodeClasses = nodeClasses.concat(extractBaseCandidates(nodeClasses, context.tailwindConfig.separator));
+                    let intersects = parentClasses.some((selector)=>nodeClasses.includes(selector)
+                    );
+                    if (intersects) {
+                        throw node.error(`You cannot \`@apply\` the \`${applyCandidate}\` utility here because it creates a circular dependency.`);
+                    }
                     let root = _postcss.default.root({
                         nodes: [
                             node.clone()
@@ -182,6 +197,42 @@ function processApply(root, context) {
                     let canRewriteSelector = node.type !== 'atrule' || node.type === 'atrule' && node.name !== 'keyframes';
                     if (canRewriteSelector) {
                         root.walkRules((rule)=>{
+                            // Let's imagine you have the following structure:
+                            //
+                            // .foo {
+                            //   @apply bar;
+                            // }
+                            //
+                            // @supports (a: b) {
+                            //   .bar {
+                            //     color: blue
+                            //   }
+                            //
+                            //   .something-unrelated {}
+                            // }
+                            //
+                            // In this case we want to apply `.bar` but it happens to be in
+                            // an atrule node. We clone that node instead of the nested one
+                            // because we still want that @supports rule to be there once we
+                            // applied everything.
+                            //
+                            // However it happens to be that the `.something-unrelated` is
+                            // also in that same shared @supports atrule. This is not good,
+                            // and this should not be there. The good part is that this is
+                            // a clone already and it can be safely removed. The question is
+                            // how do we know we can remove it. Basically what we can do is
+                            // match it against the applyCandidate that you want to apply. If
+                            // it doesn't match the we can safely delete it.
+                            //
+                            // If we didn't do this, then the `replaceSelector` function
+                            // would have replaced this with something that didn't exist and
+                            // therefore it removed the selector altogether. In this specific
+                            // case it would result in `{}` instead of `.something-unrelated {}`
+                            if (!extractClasses(rule).some((candidate)=>candidate === applyCandidate
+                            )) {
+                                rule.remove();
+                                return;
+                            }
                             rule.selector = replaceSelector(parent.selector, rule.selector, applyCandidate);
                             rule.walkDecls((d)=>{
                                 d.important = meta.important || important;
@@ -203,7 +254,6 @@ function processApply(root, context) {
             let nodes = siblings.sort(([a], [z])=>(0, _bigSign).default(a.sort - z.sort)
             ).map((s)=>s[1]
             );
-            // console.log(parent)
             // `parent` refers to the node at `.abc` in: .abc { @apply mt-2 }
             parent.after(nodes);
         }
@@ -222,7 +272,6 @@ function processApply(root, context) {
 }
 function expandApplyAtRules(context) {
     return (root)=>{
-        partitionApplyParents(root);
         processApply(root, context);
     };
 }

package/lib/lib/expandTailwindAtRules.js

@@ -7,7 +7,9 @@ var _quickLru = _interopRequireDefault(require("quick-lru"));
 var sharedState = _interopRequireWildcard(require("./sharedState"));
 var _generateRules = require("./generateRules");
 var _bigSign = _interopRequireDefault(require("../util/bigSign"));
+var _log = _interopRequireDefault(require("../util/log"));
 var _cloneNodes = _interopRequireDefault(require("../util/cloneNodes"));
+var _defaultExtractor = require("./defaultExtractor");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -17,13 +19,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 {
@@ -37,27 +37,8 @@ function _interopRequireWildcard(obj) {
     }
 }
 let env = sharedState.env;
-const PATTERNS = [
-    /([^<>"'`\s]*\[\w*'[^"`\s]*'?\])/.source,
-    /([^<>"'`\s]*\[\w*"[^"`\s]*"?\])/.source,
-    /([^<>"'`\s]*\[\w*\('[^"'`\s]*'\)\])/.source,
-    /([^<>"'`\s]*\[\w*\("[^"'`\s]*"\)\])/.source,
-    /([^<>"'`\s]*\['[^"'`\s]*'\])/.source,
-    /([^<>"'`\s]*\["[^"'`\s]*"\])/.source,
-    /([^<>"'`\s]*\[[^"'`\s]+\][^<>"'`\s]*)/.source,
-    /([^<>"'`\s]*[^"'`\s:])/.source
-].join('|');
-const BROAD_MATCH_GLOBAL_REGEXP = new RegExp(PATTERNS, 'g');
-const INNER_MATCH_GLOBAL_REGEXP = /[^<>"'`\s.(){}[\]#=%]*[^<>"'`\s.(){}[\]#=%:]/g;
 const builtInExtractors = {
-    DEFAULT: (content)=>{
-        let broadMatches = content.match(BROAD_MATCH_GLOBAL_REGEXP) || [];
-        let innerMatches = content.match(INNER_MATCH_GLOBAL_REGEXP) || [];
-        return [
-            ...broadMatches,
-            ...innerMatches
-        ];
-    }
+    DEFAULT: _defaultExtractor.defaultExtractor
 };
 const builtInTransformers = {
     DEFAULT: (content)=>content
@@ -108,6 +89,7 @@ function buildStylesheet(rules, context) {
     );
     let returnValue = {
         base: new Set(),
+        defaults: new Set(),
         components: new Set(),
         utilities: new Set(),
         variants: new Set(),
@@ -130,6 +112,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;
@@ -153,13 +139,15 @@ function expandTailwindAtRules(context) {
             utilities: null,
             variants: null
         };
-        // Make sure this file contains Tailwind directives. If not, we can save
-        // a lot of work and bail early. Also we don't have to register our touch
-        // file as a dependency since the output of this CSS does not depend on
-        // the source of any templates. Think Vue <style> blocks for example.
-        root.walkAtRules('tailwind', (rule)=>{
-            if (Object.keys(layerNodes).includes(rule.params)) {
-                layerNodes[rule.params] = rule;
+        root.walkAtRules((rule)=>{
+            // Make sure this file contains Tailwind directives. If not, we can save
+            // a lot of work and bail early. Also we don't have to register our touch
+            // file as a dependency since the output of this CSS does not depend on
+            // the source of any templates. Think Vue <style> blocks for example.
+            if (rule.name === 'tailwind') {
+                if (Object.keys(layerNodes).includes(rule.params)) {
+                    layerNodes[rule.params] = rule;
+                }
             }
         });
         if (Object.values(layerNodes).every((n)=>n === null
@@ -178,6 +166,7 @@ function expandTailwindAtRules(context) {
             let extractor = getExtractor(context.tailwindConfig, extension);
             getClassCandidates(transformer(content), extractor, candidates, seen);
         }
+        env.DEBUG && console.timeEnd('Reading changed files');
         // ---
         // Generate the actual CSS
         let classCacheCount = context.classCache.size;
@@ -195,13 +184,16 @@ 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
+                ...baseNodes,
+                ...defaultNodes
             ], layerNodes.base.source));
+        }
+        if (layerNodes.base) {
             layerNodes.base.remove();
         }
         if (layerNodes.components) {
@@ -226,6 +218,13 @@ function expandTailwindAtRules(context) {
                 ...screenNodes
             ], root.source));
         }
+        // If we've got a utility layer and no utilities are generated there's likely something wrong
+        // TODO: Detect utility variants only
+        if (layerNodes.utilities && utilityNodes.size === 0 && screenNodes.size === 0) {
+            _log.default.warn('content-problems', [
+                'No utilities were generated there is likely a problem with the `content` key in the tailwind config. For more information see the documentation: https://tailwindcss.com/docs/content-configuration', 
+            ]);
+        }
         // ---
         if (env.DEBUG) {
             console.log('Potential classes: ', candidates.size);