tailwindcss 3.0.6 → 3.0.10

package/CHANGELOG.md

@@ -9,6 +9,47 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Nothing yet!
 
+## [3.0.10] - 2022-01-04
+
+### Fixed
+
+- Fix `@apply` in files without `@tailwind` directives ([#6580](https://github.com/tailwindlabs/tailwindcss/pull/6580), [#6875](https://github.com/tailwindlabs/tailwindcss/pull/6875))
+- CLI: avoid unnecessary writes to output files ([#6550](https://github.com/tailwindlabs/tailwindcss/pull/6550))
+
+### Added
+
+- Allow piping data into the CLI ([#6876](https://github.com/tailwindlabs/tailwindcss/pull/6876))
+
+## [3.0.9] - 2022-01-03
+
+### Fixed
+
+- Improve `DEBUG` flag ([#6797](https://github.com/tailwindlabs/tailwindcss/pull/6797), [#6804](https://github.com/tailwindlabs/tailwindcss/pull/6804))
+- Ensure we can use `<` and `>` characters in modifiers ([#6851](https://github.com/tailwindlabs/tailwindcss/pull/6851))
+- Validate `theme()` works in arbitrary values ([#6852](https://github.com/tailwindlabs/tailwindcss/pull/6852))
+- Properly detect `theme()` value usage in arbitrary properties ([#6854](https://github.com/tailwindlabs/tailwindcss/pull/6854))
+- Improve collapsing of duplicate declarations ([#6856](https://github.com/tailwindlabs/tailwindcss/pull/6856))
+- Remove support for `TAILWIND_MODE=watch` ([#6858](https://github.com/tailwindlabs/tailwindcss/pull/6858))
+
+## [3.0.8] - 2021-12-28
+
+### Fixed
+
+- Reduce specificity of `abbr` rule in preflight ([#6671](https://github.com/tailwindlabs/tailwindcss/pull/6671))
+- Support HSL with hue units in arbitrary values ([#6726](https://github.com/tailwindlabs/tailwindcss/pull/6726))
+- Add `node16-linux-arm64` target for standalone CLI ([#6693](https://github.com/tailwindlabs/tailwindcss/pull/6693))
+
+## [3.0.7] - 2021-12-17
+
+### Fixed
+
+- Don't mutate custom color palette when overriding per-plugin colors ([#6546](https://github.com/tailwindlabs/tailwindcss/pull/6546))
+- Improve circular dependency detection when using `@apply` ([#6588](https://github.com/tailwindlabs/tailwindcss/pull/6588))
+- Only generate variants for non-`user` layers ([#6589](https://github.com/tailwindlabs/tailwindcss/pull/6589))
+- Properly extract classes with arbitrary values in arrays and classes followed by escaped quotes ([#6590](https://github.com/tailwindlabs/tailwindcss/pull/6590))
+- Improve jsx interpolation candidate matching ([#6593](https://github.com/tailwindlabs/tailwindcss/pull/6593))
+- Ensure `@apply` of a rule inside an AtRule works ([#6594](https://github.com/tailwindlabs/tailwindcss/pull/6594))
+
 ## [3.0.6] - 2021-12-16
 
 ### Fixed
@@ -1730,8 +1771,12 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.6...HEAD
-[3.0.6]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.6...v3.0.6
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.10...HEAD
+[3.0.10]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.9...v3.0.10
+[3.0.9]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.8...v3.0.9
+[3.0.8]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.7...v3.0.8
+[3.0.7]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.6...v3.0.7
+[3.0.6]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.5...v3.0.6
 [3.0.5]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.4...v3.0.5
 [3.0.4]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.3...v3.0.4
 [3.0.3]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.2...v3.0.3

package/README.md

@@ -1,10 +1,14 @@
 <p>
-    <a href="https://tailwindcss.com/" target="_blank">
-      <img alt="Tailwind CSS" width="350" src="https://refactoringui.nyc3.cdn.digitaloceanspaces.com/tailwind-logo-sticker.svg">
-    </a><br>
-    A utility-first CSS framework for rapidly building custom user interfaces.
+  <a href="https://tailwindcss.com/#gh-light-mode-only" target="_blank">
+    <img src="./.github/logo-light.svg" alt="Tailwind CSS" width="350" height="70">
+  </a>
+  <a href="https://tailwindcss.com/#gh-dark-mode-only" target="_blank">
+    <img src="./.github/logo-dark.svg" alt="Tailwind CSS" width="350" height="70">
+  </a>
 </p>
 
+A utility-first CSS framework for rapidly building custom user interfaces.
+
 <p>
     <a href="https://github.com/tailwindlabs/tailwindcss/actions"><img src="https://img.shields.io/github/workflow/status/tailwindlabs/tailwindcss/Node.js%20CI" alt="Build Status"></a>
     <a href="https://www.npmjs.com/package/tailwindcss"><img src="https://img.shields.io/npm/dt/tailwindcss.svg" alt="Total Downloads"></a>

package/lib/cli.js

@@ -40,6 +40,25 @@ function formatNodes(root) {
         root.first.raws.before = '';
     }
 }
+async function outputFile(file, contents) {
+    if (_fs.default.existsSync(file) && await _fs.default.promises.readFile(file, 'utf8') === contents) {
+        return; // Skip writing the file
+    }
+    // Write the file
+    await _fs.default.promises.writeFile(file, contents, 'utf8');
+}
+function drainStdin() {
+    return new Promise((resolve, reject)=>{
+        let result = '';
+        process.stdin.on('data', (chunk)=>{
+            result += chunk;
+        });
+        process.stdin.on('end', ()=>resolve(result)
+        );
+        process.stdin.on('error', (err)=>reject(err)
+        );
+    });
+}
 function help({ message , usage , commands: commands1 , options  }) {
     let indent = 2;
     // Render header
@@ -336,7 +355,7 @@ async function build() {
         console.error('[deprecation] Running tailwindcss without -i, please provide an input file.');
         input = args['--input'] = args['_'][1];
     }
-    if (input && !_fs.default.existsSync(input = _path.default.resolve(input))) {
+    if (input && input !== '-' && !_fs.default.existsSync(input = _path.default.resolve(input))) {
         console.error(`Specified input file ${args['--input']} does not exist.`);
         process.exit(9);
     }
@@ -499,10 +518,8 @@ async function build() {
                     return process.stdout.write(result.css);
                 }
                 return Promise.all([
-                    _fs.default.promises.writeFile(output, result.css, ()=>true
-                    ),
-                    result.map && _fs.default.writeFile(output + '.map', result.map.toString(), ()=>true
-                    ), 
+                    outputFile(output, result.css),
+                    result.map && outputFile(output + '.map', result.map.toString()), 
                 ].filter(Boolean));
             }).then(()=>{
                 let end = process.hrtime.bigint();
@@ -510,7 +527,18 @@ async function build() {
                 console.error('Done in', (end - start) / BigInt(1000000) + 'ms.');
             });
         }
-        let css1 = input ? _fs.default.readFileSync(_path.default.resolve(input), 'utf8') : '@tailwind base; @tailwind components; @tailwind utilities';
+        let css1 = await (()=>{
+            // Piping in data, let's drain the stdin
+            if (input === '-') {
+                return drainStdin();
+            }
+            // Input file has been provided
+            if (input) {
+                return _fs.default.readFileSync(_path.default.resolve(input), 'utf8');
+            }
+            // No input file provided, fallback to default atrules
+            return '@tailwind base; @tailwind components; @tailwind utilities';
+        })();
         return processCSS(css1);
     }
     let context = null;
@@ -619,11 +647,9 @@ async function build() {
                     if (!output) {
                         return process.stdout.write(result.css);
                     }
-                    await Promise.all([
-                        _fs.default.promises.writeFile(output, result.css, ()=>true
-                        ),
-                        result.map && _fs.default.writeFile(output + '.map', result.map.toString(), ()=>true
-                        ), 
+                    return Promise.all([
+                        outputFile(output, result.css),
+                        result.map && outputFile(output + '.map', result.map.toString()), 
                     ].filter(Boolean));
                 }).then(()=>{
                     let end = process.hrtime.bigint();
@@ -636,7 +662,18 @@ async function build() {
                     }
                 });
             }
-            let css2 = input ? _fs.default.readFileSync(_path.default.resolve(input), 'utf8') : '@tailwind base; @tailwind components; @tailwind utilities';
+            let css2 = await (()=>{
+                // Piping in data, let's drain the stdin
+                if (input === '-') {
+                    return drainStdin();
+                }
+                // Input file has been provided
+                if (input) {
+                    return _fs.default.readFileSync(_path.default.resolve(input), 'utf8');
+                }
+                // No input file provided, fallback to default atrules
+                return '@tailwind base; @tailwind components; @tailwind utilities';
+            })();
             let result1 = await processCSS(css2);
             env.DEBUG && console.timeEnd('Finished in');
             return result1;

package/lib/css/preflight.css

@@ -58,7 +58,7 @@ hr {
 Add the correct text decoration in Chrome, Edge, and Safari.
 */
 
-abbr[title] {
+abbr:where([title]) {
   text-decoration: underline dotted;
 }
 

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

@@ -8,6 +8,7 @@ function collapseDuplicateDeclarations() {
         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
@@ -17,13 +18,63 @@ function collapseDuplicateDeclarations() {
                     return;
                 }
                 if (seen.has(decl.prop)) {
-                    droppable.add(seen.get(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/expandApplyAtRules.js

@@ -13,17 +13,28 @@ 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 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 prefix1 = context.tailwindConfig.prefix;
@@ -186,10 +197,36 @@ 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 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: [
@@ -199,6 +236,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;
@@ -220,7 +293,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);
         }

package/lib/lib/expandTailwindAtRules.js

@@ -9,6 +9,7 @@ var sharedState = _interopRequireWildcard(require("./sharedState"));
 var _generateRules = require("./generateRules");
 var _bigSign = _interopRequireDefault(require("../util/bigSign"));
 var _cloneNodes = _interopRequireDefault(require("../util/cloneNodes"));
+var _defaultExtractor = require("./defaultExtractor");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -38,31 +39,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]*\[\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:])/.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
@@ -165,17 +143,26 @@ 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;
+        let hasApply = false;
+        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;
+                }
+            }
+            // We also want to check for @apply because the user can
+            // apply classes in an isolated environment like CSS
+            // modules and we still need to inject defaults
+            if (rule.name === 'apply') {
+                hasApply = true;
             }
         });
         if (Object.values(layerNodes).every((n)=>n === null
-        )) {
+        ) && !hasApply) {
             return root;
         }
         // ---

package/lib/lib/generateRules.js

@@ -124,6 +124,10 @@ function applyVariant(variant, matches, context) {
         let variantFunctionTuples = context.variantMap.get(variant);
         let result = [];
         for (let [meta, rule1] of matches){
+            // Don't generate variants for user css
+            if (meta.layer === 'user') {
+                continue;
+            }
             let container = _postcss.default.root({
                 nodes: [
                     rule1.clone()

package/lib/lib/normalizeTailwindDirectives.js

@@ -12,7 +12,11 @@ function _interopRequireDefault(obj) {
 function normalizeTailwindDirectives(root) {
     let tailwindDirectives = new Set();
     let layerDirectives = new Set();
+    let applyDirectives = new Set();
     root.walkAtRules((atRule)=>{
+        if (atRule.name === 'apply') {
+            applyDirectives.add(atRule);
+        }
         if (atRule.name === 'import') {
             if (atRule.params === '"tailwindcss/base"' || atRule.params === "'tailwindcss/base'") {
                 atRule.name = 'tailwind';
@@ -72,5 +76,8 @@ function normalizeTailwindDirectives(root) {
             }
         }
     }
-    return tailwindDirectives;
+    return {
+        tailwindDirectives,
+        applyDirectives
+    };
 }

package/lib/lib/setupTrackingContext.js

@@ -119,16 +119,17 @@ function resolveChangedFiles(candidateFiles, fileModifiedMap) {
     return changedFiles;
 }
 function setupTrackingContext(configOrPath) {
-    return ({ tailwindDirectives , registerDependency  })=>{
+    return ({ tailwindDirectives , registerDependency , applyDirectives  })=>{
         return (root, result)=>{
             let [tailwindConfig, userConfigPath, tailwindConfigHash, configDependencies] = getTailwindConfig(configOrPath);
             let contextDependencies = new Set(configDependencies);
-            // If there are no @tailwind rules, we don't consider this CSS file or it's dependencies
-            // to be dependencies of the context. Can reuse the context even if they change.
-            // We may want to think about `@layer` being part of this trigger too, but it's tough
-            // because it's impossible for a layer in one file to end up in the actual @tailwind rule
-            // in another file since independent sources are effectively isolated.
-            if (tailwindDirectives.size > 0) {
+            // If there are no @tailwind or @apply rules, we don't consider this CSS
+            // file or its dependencies to be dependencies of the context. Can reuse
+            // the context even if they change. We may want to think about `@layer`
+            // being part of this trigger too, but it's tough because it's impossible
+            // for a layer in one file to end up in the actual @tailwind rule in
+            // another file since independent sources are effectively isolated.
+            if (tailwindDirectives.size > 0 || applyDirectives.size > 0) {
                 // Add current css file as a context dependencies.
                 contextDependencies.add(result.opts.from);
                 // Add all css @import dependencies as context dependencies.
@@ -140,12 +141,12 @@ function setupTrackingContext(configOrPath) {
             }
             let [context] = (0, _setupContextUtils).getContext(root, result, tailwindConfig, userConfigPath, tailwindConfigHash, contextDependencies);
             let candidateFiles = getCandidateFiles(context, tailwindConfig);
-            // If there are no @tailwind rules, we don't consider this CSS file or it's dependencies
-            // to be dependencies of the context. Can reuse the context even if they change.
+            // If there are no @tailwind or @apply rules, we don't consider this CSS file or it's
+            // dependencies to be dependencies of the context. Can reuse the context even if they change.
             // We may want to think about `@layer` being part of this trigger too, but it's tough
             // because it's impossible for a layer in one file to end up in the actual @tailwind rule
             // in another file since independent sources are effectively isolated.
-            if (tailwindDirectives.size > 0) {
+            if (tailwindDirectives.size > 0 || applyDirectives.size > 0) {
                 let fileModifiedMap = (0, _setupContextUtils).getFileModifiedMap(context);
                 // Add template paths as postcss dependencies.
                 for (let fileOrGlob of candidateFiles){