tailwindcss 0.0.0-insiders.bd970d0 → 0.0.0-insiders.bda8421

package/lib/lib/generateRules.js

@@ -33,6 +33,7 @@ const _dataTypes = require("../util/dataTypes");
 const _setupContextUtils = require("./setupContextUtils");
 const _isSyntacticallyValidPropertyValue = /*#__PURE__*/ _interop_require_default(require("../util/isSyntacticallyValidPropertyValue"));
 const _splitAtTopLevelOnly = require("../util/splitAtTopLevelOnly.js");
+const _featureFlags = require("../featureFlags");
 const _applyImportantSelector = require("../util/applyImportantSelector");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -79,7 +80,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 let classNameParser = (0, _postcssselectorparser.default)((selectors)=>{
-    return selectors.first.filter(({ type })=>type === 'class').pop().value;
+    return selectors.first.filter(({ type  })=>type === "class").pop().value;
 });
 function getClassNameFromSelector(selector) {
     return classNameParser.transformSync(selector);
@@ -96,23 +97,23 @@ function* candidatePermutations(candidate) {
     while(lastIndex >= 0){
         let dashIdx;
         let wasSlash = false;
-        if (lastIndex === Infinity && candidate.endsWith(']')) {
-            let bracketIdx = candidate.indexOf('[');
+        if (lastIndex === Infinity && candidate.endsWith("]")) {
+            let bracketIdx = candidate.indexOf("[");
             // If character before `[` isn't a dash or a slash, this isn't a dynamic class
-            // e.g. string[]
-            if (candidate[bracketIdx - 1] === '-') {
+            // eg. string[]
+            if (candidate[bracketIdx - 1] === "-") {
                 dashIdx = bracketIdx - 1;
-            } else if (candidate[bracketIdx - 1] === '/') {
+            } else if (candidate[bracketIdx - 1] === "/") {
                 dashIdx = bracketIdx - 1;
                 wasSlash = true;
             } else {
                 dashIdx = -1;
             }
-        } else if (lastIndex === Infinity && candidate.includes('/')) {
-            dashIdx = candidate.lastIndexOf('/');
+        } else if (lastIndex === Infinity && candidate.includes("/")) {
+            dashIdx = candidate.lastIndexOf("/");
             wasSlash = true;
         } else {
-            dashIdx = candidate.lastIndexOf('-', lastIndex);
+            dashIdx = candidate.lastIndexOf("-", lastIndex);
         }
         if (dashIdx < 0) {
             break;
@@ -121,7 +122,7 @@ function* candidatePermutations(candidate) {
         let modifier = candidate.slice(wasSlash ? dashIdx : dashIdx + 1);
         lastIndex = dashIdx - 1;
         // TODO: This feels a bit hacky
-        if (prefix === '' || modifier === '/') {
+        if (prefix === "" || modifier === "/") {
             continue;
         }
         yield [
@@ -131,7 +132,7 @@ function* candidatePermutations(candidate) {
     }
 }
 function applyPrefix(matches, context) {
-    if (matches.length === 0 || context.tailwindConfig.prefix === '') {
+    if (matches.length === 0 || context.tailwindConfig.prefix === "") {
         return matches;
     }
     for (let match of matches){
@@ -148,7 +149,7 @@ function applyPrefix(matches, context) {
                 // have to ensure that the generated selector matches the candidate
                 // Not doing this will cause `-tw-top-1` to generate the class `.tw--top-1`
                 // The disconnect between candidate <-> class can cause @apply to hard crash.
-                let shouldPrependNegative = classCandidate.startsWith('-');
+                let shouldPrependNegative = classCandidate.startsWith("-");
                 r.selector = (0, _prefixSelector.default)(context.tailwindConfig.prefix, r.selector, shouldPrependNegative);
             });
             match[1] = container.nodes[0];
@@ -161,6 +162,9 @@ function applyImportant(matches, classCandidate) {
         return matches;
     }
     let result = [];
+    function isInKeyframes(rule) {
+        return rule.parent && rule.parent.type === "atrule" && rule.parent.name === "keyframes";
+    }
     for (let [meta, rule] of matches){
         let container = _postcss.default.root({
             nodes: [
@@ -168,6 +172,11 @@ function applyImportant(matches, classCandidate) {
             ]
         });
         container.walkRules((r)=>{
+            // Declarations inside keyframes cannot be marked as important
+            // They will be ignored by the browser
+            if (isInKeyframes(r)) {
+                return;
+            }
             let ast = (0, _postcssselectorparser.default)().astSync(r.selector);
             // Remove extraneous selectors that do not include the base candidate
             ast.each((sel)=>(0, _formatVariantSelector.eliminateIrrelevantSelectors)(sel, classCandidate));
@@ -204,20 +213,23 @@ function applyVariant(variant, matches, context) {
     };
     // Retrieve "modifier"
     {
-        let [baseVariant, ...modifiers] = (0, _splitAtTopLevelOnly.splitAtTopLevelOnly)(variant, '/');
+        let [baseVariant, ...modifiers] = (0, _splitAtTopLevelOnly.splitAtTopLevelOnly)(variant, "/");
         // This is a hack to support variants with `/` in them, like `ar-1/10/20:text-red-500`
         // In this case 1/10 is a value but /20 is a modifier
         if (modifiers.length > 1) {
-            baseVariant = baseVariant + '/' + modifiers.slice(0, -1).join('/');
+            baseVariant = baseVariant + "/" + modifiers.slice(0, -1).join("/");
             modifiers = modifiers.slice(-1);
         }
         if (modifiers.length && !context.variantMap.has(variant)) {
             variant = baseVariant;
             args.modifier = modifiers[0];
+            if (!(0, _featureFlags.flagEnabled)(context.tailwindConfig, "generalizedModifiers")) {
+                return [];
+            }
         }
     }
     // Retrieve "arbitrary value"
-    if (variant.endsWith(']') && !variant.startsWith('[')) {
+    if (variant.endsWith("]") && !variant.startsWith("[")) {
         // We either have:
         //   @[200px]
         //   group-[:hover]
@@ -229,10 +241,10 @@ function applyVariant(variant, matches, context) {
         if (match) {
             let [, char, separator, value] = match;
             // @-[200px] case
-            if (char === '@' && separator === '-') return [];
+            if (char === "@" && separator === "-") return [];
             // group[:hover] case
-            if (char !== '@' && separator === '') return [];
-            variant = variant.replace(`${separator}[${value}]`, '');
+            if (char !== "@" && separator === "") return [];
+            variant = variant.replace(`${separator}[${value}]`, "");
             args.value = value;
         }
     }
@@ -240,7 +252,7 @@ function applyVariant(variant, matches, context) {
     if (isArbitraryValue(variant) && !context.variantMap.has(variant)) {
         let sort = context.offsets.recordVariant(variant);
         let selector = (0, _dataTypes.normalize)(variant.slice(1, -1));
-        let selectors = (0, _splitAtTopLevelOnly.splitAtTopLevelOnly)(selector, ',');
+        let selectors = (0, _splitAtTopLevelOnly.splitAtTopLevelOnly)(selector, ",");
         // We do not support multiple selectors for arbitrary variants
         if (selectors.length > 1) {
             return [];
@@ -268,7 +280,7 @@ function applyVariant(variant, matches, context) {
         })();
         for (let [meta, rule] of matches){
             // Don't generate variants for user css
-            if (meta.layer === 'user') {
+            if (meta.layer === "user") {
                 continue;
             }
             let container = _postcss.default.root({
@@ -290,7 +302,7 @@ function applyVariant(variant, matches, context) {
                 function modifySelectors(modifierFunction) {
                     prepareBackup();
                     clone.each((rule)=>{
-                        if (rule.type !== 'rule') {
+                        if (rule.type !== "rule") {
                             return;
                         }
                         rule.selectors = rule.selectors.map((selector)=>{
@@ -345,7 +357,7 @@ function applyVariant(variant, matches, context) {
                     }
                     continue;
                 }
-                if (typeof ruleWithVariant === 'string') {
+                if (typeof ruleWithVariant === "string") {
                     collectedFormats.push({
                         format: ruleWithVariant,
                         respectPrefix
@@ -386,7 +398,7 @@ function applyVariant(variant, matches, context) {
                         //    rebuiltBase (internal): .foo\\:markdown > p
                         //                    format: .foo &
                         collectedFormats.push({
-                            format: modified.replace(rebuiltBase, '&'),
+                            format: modified.replace(rebuiltBase, "&"),
                             respectPrefix
                         });
                         rule.selector = before;
@@ -449,12 +461,12 @@ function isValidPropName(name) {
  */ function looksLikeUri(declaration) {
     // Quick bailout for obvious non-urls
     // This doesn't support schemes that don't use a leading // but that's unlikely to be a problem
-    if (!declaration.includes('://')) {
+    if (!declaration.includes("://")) {
         return false;
     }
     try {
         const url = new URL(declaration);
-        return url.scheme !== '' && url.host !== '';
+        return url.scheme !== "" && url.host !== "";
     } catch (err) {
         // Definitely not a valid url
         return false;
@@ -471,9 +483,9 @@ function isParsableNode(node) {
     return isParsable;
 }
 function isParsableCssValue(property, value) {
-    // We don't want to treat [https://example.com] as a custom property
+    // We don't want to to treat [https://example.com] as a custom property
     // Even though, according to the CSS grammar, it's a totally valid CSS declaration
-    // So we short-circuit here by checking if the custom property looks like a URL
+    // So we short-circuit here by checking if the custom property looks like a url
     if (looksLikeUri(`${property}:${value}`)) {
         return false;
     }
@@ -496,16 +508,18 @@ function extractArbitraryProperty(classCandidate, context) {
     if (!(0, _isSyntacticallyValidPropertyValue.default)(value)) {
         return null;
     }
-    let normalized = (0, _dataTypes.normalize)(value);
+    let normalized = (0, _dataTypes.normalize)(value, {
+        property
+    });
     if (!isParsableCssValue(property, normalized)) {
         return null;
     }
-    let sort = context.offsets.arbitraryProperty();
+    let sort = context.offsets.arbitraryProperty(classCandidate);
     return [
         [
             {
                 sort,
-                layer: 'utilities'
+                layer: "utilities"
             },
             ()=>({
                     [(0, _nameClass.asClass)(classCandidate)]: {
@@ -519,14 +533,14 @@ function* resolveMatchedPlugins(classCandidate, context) {
     if (context.candidateRuleMap.has(classCandidate)) {
         yield [
             context.candidateRuleMap.get(classCandidate),
-            'DEFAULT'
+            "DEFAULT"
         ];
     }
     yield* function*(arbitraryPropertyRule) {
         if (arbitraryPropertyRule !== null) {
             yield [
                 arbitraryPropertyRule,
-                'DEFAULT'
+                "DEFAULT"
             ];
         }
     }(extractArbitraryProperty(classCandidate, context));
@@ -535,14 +549,14 @@ function* resolveMatchedPlugins(classCandidate, context) {
     const twConfigPrefix = context.tailwindConfig.prefix;
     const twConfigPrefixLen = twConfigPrefix.length;
     const hasMatchingPrefix = candidatePrefix.startsWith(twConfigPrefix) || candidatePrefix.startsWith(`-${twConfigPrefix}`);
-    if (candidatePrefix[twConfigPrefixLen] === '-' && hasMatchingPrefix) {
+    if (candidatePrefix[twConfigPrefixLen] === "-" && hasMatchingPrefix) {
         negative = true;
         candidatePrefix = twConfigPrefix + candidatePrefix.slice(twConfigPrefixLen + 1);
     }
     if (negative && context.candidateRuleMap.has(candidatePrefix)) {
         yield [
             context.candidateRuleMap.get(candidatePrefix),
-            '-DEFAULT'
+            "-DEFAULT"
         ];
     }
     for (let [prefix, modifier] of candidatePermutations(candidatePrefix)){
@@ -578,7 +592,7 @@ function* resolveMatches(candidate, context) {
     let separator = context.tailwindConfig.separator;
     let [classCandidate, ...variants] = splitWithSeparator(candidate, separator).reverse();
     let important = false;
-    if (classCandidate.startsWith('!')) {
+    if (classCandidate.startsWith("!")) {
         important = true;
         classCandidate = classCandidate.slice(1);
     }
@@ -600,7 +614,7 @@ function* resolveMatches(candidate, context) {
         let isOnlyPlugin = plugins.length === 1;
         for (let [sort, plugin] of plugins){
             let matchesPerPlugin = [];
-            if (typeof plugin === 'function') {
+            if (typeof plugin === "function") {
                 for (let ruleSet of [].concat(plugin(modifier, {
                     isOnlyPlugin
                 }))){
@@ -618,7 +632,7 @@ function* resolveMatches(candidate, context) {
                         ]);
                     }
                 }
-            } else if (modifier === 'DEFAULT' || modifier === '-DEFAULT') {
+            } else if (modifier === "DEFAULT" || modifier === "-DEFAULT") {
                 let ruleSet = plugin;
                 let [rules, options] = parseRules(ruleSet, context.postCssNodeCache);
                 for (let rule of rules){
@@ -649,7 +663,7 @@ function* resolveMatches(candidate, context) {
                 // Partition plugins in 2 categories so that we can start searching in the plugins that
                 // don't have `any` as a type first.
                 let [withAny, withoutAny] = matches.reduce((group, plugin)=>{
-                    let hasAnyType = plugin.some(([{ options }])=>options.types.some(({ type })=>type === 'any'));
+                    let hasAnyType = plugin.some(([{ options  }])=>options.types.some(({ type  })=>type === "any"));
                     if (hasAnyType) {
                         group[0].push(plugin);
                     } else {
@@ -669,11 +683,11 @@ function* resolveMatches(candidate, context) {
                     // also has the correct type which preferOnConflicts the plugin in case of clashes.
                     return matches.find((rules)=>{
                         let matchingTypes = typesByMatches.get(rules);
-                        return rules.some(([{ options }, rule])=>{
+                        return rules.some(([{ options  }, rule])=>{
                             if (!isParsableNode(rule)) {
                                 return false;
                             }
-                            return options.types.some(({ type, preferOnConflict })=>matchingTypes.includes(type) && preferOnConflict);
+                            return options.types.some(({ type , preferOnConflict  })=>matchingTypes.includes(type) && preferOnConflict);
                         });
                     });
                 }
@@ -707,17 +721,17 @@ function* resolveMatches(candidate, context) {
                     let messages = [];
                     for (let [idx, group] of typesPerPlugin.entries()){
                         for (let type of group){
-                            let rules = matches[idx].map(([, rule])=>rule).flat().map((rule)=>rule.toString().split('\n').slice(1, -1) // Remove selector and closing '}'
+                            let rules = matches[idx].map(([, rule])=>rule).flat().map((rule)=>rule.toString().split("\n").slice(1, -1) // Remove selector and closing '}'
                                 .map((line)=>line.trim()).map((x)=>`      ${x}`) // Re-indent
-                                .join('\n')).join('\n\n');
-                            messages.push(`  Use \`${candidate.replace('[', `[${type}:`)}\` for \`${rules.trim()}\``);
+                                .join("\n")).join("\n\n");
+                            messages.push(`  Use \`${candidate.replace("[", `[${type}:`)}\` for \`${rules.trim()}\``);
                             break;
                         }
                     }
                     _log.default.warn([
                         `The class \`${candidate}\` is ambiguous and matches multiple utilities.`,
                         ...messages,
-                        `If this is content and not a class, replace it with \`${candidate.replace('[', '&lsqb;').replace(']', '&rsqb;')}\` to silence this warning.`
+                        `If this is content and not a class, replace it with \`${candidate.replace("[", "&lsqb;").replace("]", "&rsqb;")}\` to silence this warning.`
                     ]);
                     continue;
                 }
@@ -753,7 +767,7 @@ function* resolveMatches(candidate, context) {
         }
     }
 }
-function applyFinalFormat(match, { context, candidate }) {
+function applyFinalFormat(match, { context , candidate  }) {
     if (!match[0].collectedFormats) {
         return match;
     }
@@ -764,7 +778,7 @@ function applyFinalFormat(match, { context, candidate }) {
             context,
             candidate
         });
-    } catch (e) {
+    } catch  {
         // The format selector we produced is invalid
         // This could be because:
         // - A bug exists
@@ -786,11 +800,18 @@ function applyFinalFormat(match, { context, candidate }) {
             return;
         }
         try {
-            rule.selector = (0, _formatVariantSelector.finalizeSelector)(rule.selector, finalFormat, {
+            let selector = (0, _formatVariantSelector.finalizeSelector)(rule.selector, finalFormat, {
                 candidate,
                 context
             });
-        } catch (e) {
+            // Finalize Selector determined that this candidate is irrelevant
+            // TODO: This elimination should happen earlier so this never happens
+            if (selector === null) {
+                rule.remove();
+                return;
+            }
+            rule.selector = selector;
+        } catch  {
             // If this selector is invalid we also want to skip it
             // But it's likely that being invalid here means there's a bug in a plugin rather than too loosely matching content
             isValid = false;
@@ -800,11 +821,15 @@ function applyFinalFormat(match, { context, candidate }) {
     if (!isValid) {
         return null;
     }
+    // If all rules have been eliminated we can skip this candidate entirely
+    if (container.nodes.length === 0) {
+        return null;
+    }
     match[1] = container.nodes[0];
     return match;
 }
 function inKeyframes(rule) {
-    return rule.parent && rule.parent.type === 'atrule' && rule.parent.name === 'keyframes';
+    return rule.parent && rule.parent.type === "atrule" && rule.parent.name === "keyframes";
 }
 function getImportantStrategy(important) {
     if (important === true) {
@@ -813,13 +838,13 @@ function getImportantStrategy(important) {
                 return;
             }
             rule.walkDecls((d)=>{
-                if (d.parent.type === 'rule' && !inKeyframes(d.parent)) {
+                if (d.parent.type === "rule" && !inKeyframes(d.parent)) {
                     d.important = true;
                 }
             });
         };
     }
-    if (typeof important === 'string') {
+    if (typeof important === "string") {
         return (rule)=>{
             if (inKeyframes(rule)) {
                 return;
@@ -830,7 +855,7 @@ function getImportantStrategy(important) {
         };
     }
 }
-function generateRules(candidates, context) {
+function generateRules(candidates, context, isSorting = false) {
     let allRules = [];
     let strategy = getImportantStrategy(context.tailwindConfig.important);
     for (let candidate of candidates){
@@ -851,7 +876,7 @@ function generateRules(candidates, context) {
         let rules = (_context_candidateRuleCache_get = context.candidateRuleCache.get(candidate)) !== null && _context_candidateRuleCache_get !== void 0 ? _context_candidateRuleCache_get : new Set();
         context.candidateRuleCache.set(candidate, rules);
         for (const match of matches){
-            let [{ sort, options }, rule] = match;
+            let [{ sort , options  }, rule] = match;
             if (options.respectImportant && strategy) {
                 let container = _postcss.default.root({
                     nodes: [
@@ -861,9 +886,11 @@ function generateRules(candidates, context) {
                 container.walkRules(strategy);
                 rule = container.nodes[0];
             }
+            // Note: We have to clone rules during sorting
+            // so we eliminate some shared mutable state
             let newEntry = [
                 sort,
-                rule
+                isSorting ? rule.clone() : rule
             ];
             rules.add(newEntry);
             context.ruleCache.add(newEntry);
@@ -873,5 +900,5 @@ function generateRules(candidates, context) {
     return allRules;
 }
 function isArbitraryValue(input) {
-    return input.startsWith('[') && input.endsWith(']');
+    return input.startsWith("[") && input.endsWith("]");
 }

package/lib/lib/getModuleDependencies.js

@@ -16,9 +16,9 @@ function _interop_require_default(obj) {
     };
 }
 let jsExtensions = [
-    '.js',
-    '.cjs',
-    '.mjs'
+    ".js",
+    ".cjs",
+    ".mjs"
 ];
 // Given the current file `a.ts`, we want to make sure that when importing `b` that we resolve
 // `b.ts` before `b.js`
@@ -31,26 +31,26 @@ let jsExtensions = [
 // a.js
 //   b // .js or .ts
 let jsResolutionOrder = [
-    '',
-    '.js',
-    '.cjs',
-    '.mjs',
-    '.ts',
-    '.cts',
-    '.mts',
-    '.jsx',
-    '.tsx'
+    "",
+    ".js",
+    ".cjs",
+    ".mjs",
+    ".ts",
+    ".cts",
+    ".mts",
+    ".jsx",
+    ".tsx"
 ];
 let tsResolutionOrder = [
-    '',
-    '.ts',
-    '.cts',
-    '.mts',
-    '.tsx',
-    '.js',
-    '.cjs',
-    '.mjs',
-    '.jsx'
+    "",
+    ".ts",
+    ".cts",
+    ".mts",
+    ".tsx",
+    ".js",
+    ".cjs",
+    ".mjs",
+    ".jsx"
 ];
 function resolveWithExtension(file, extensions) {
     // Try to find `./a.ts`, `./a.ts`, ... from `./a`
@@ -81,7 +81,7 @@ function* _getModuleDependencies(filename, base, seen, ext = _path.default.extna
     // Resolve new base for new imports/requires
     base = _path.default.dirname(absoluteFile);
     ext = _path.default.extname(absoluteFile);
-    let contents = _fs.default.readFileSync(absoluteFile, 'utf-8');
+    let contents = _fs.default.readFileSync(absoluteFile, "utf-8");
     // Find imports/requires
     for (let match of [
         ...contents.matchAll(/import[\s\S]*?['"](.{3,}?)['"]/gi),
@@ -89,7 +89,7 @@ function* _getModuleDependencies(filename, base, seen, ext = _path.default.extna
         ...contents.matchAll(/require\(['"`](.+)['"`]\)/gi)
     ]){
         // Bail out if it's not a relative file
-        if (!match[1].startsWith('.')) continue;
+        if (!match[1].startsWith(".")) continue;
         yield* _getModuleDependencies(match[1], base, seen, ext);
     }
 }

package/lib/lib/load-config.js

@@ -2,9 +2,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "loadConfig", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useCustomJiti: function() {
+        return useCustomJiti;
+    },
+    loadConfig: function() {
         return loadConfig;
     }
 });
@@ -16,14 +24,21 @@ function _interop_require_default(obj) {
     };
 }
 let jiti = null;
+function useCustomJiti(_jiti) {
+    jiti = _jiti();
+}
 function lazyJiti() {
     return jiti !== null && jiti !== void 0 ? jiti : jiti = (0, _jiti.default)(__filename, {
         interopDefault: true,
         transform: (opts)=>{
+            // Sucrase can't transform import.meta so we have to use Babel
+            if (opts.source.includes("import.meta")) {
+                return require("jiti/dist/babel.js")(opts);
+            }
             return (0, _sucrase.transform)(opts.source, {
                 transforms: [
-                    'typescript',
-                    'imports'
+                    "typescript",
+                    "imports"
                 ]
             });
         }
@@ -33,7 +48,7 @@ function loadConfig(path) {
     let config = function() {
         try {
             return path ? require(path) : {};
-        } catch (e) {
+        } catch  {
             return lazyJiti()(path);
         }
     }();

package/lib/lib/normalizeTailwindDirectives.js

@@ -19,50 +19,65 @@ function normalizeTailwindDirectives(root) {
     let layerDirectives = new Set();
     let applyDirectives = new Set();
     root.walkAtRules((atRule)=>{
-        if (atRule.name === 'apply') {
+        if (atRule.name === "apply") {
             applyDirectives.add(atRule);
         }
-        if (atRule.name === 'tailwind') {
-            if (atRule.params === 'screens') {
-                atRule.params = 'variants';
+        if (atRule.name === "import") {
+            if (atRule.params === '"tailwindcss/base"' || atRule.params === "'tailwindcss/base'") {
+                atRule.name = "tailwind";
+                atRule.params = "base";
+            } else if (atRule.params === '"tailwindcss/components"' || atRule.params === "'tailwindcss/components'") {
+                atRule.name = "tailwind";
+                atRule.params = "components";
+            } else if (atRule.params === '"tailwindcss/utilities"' || atRule.params === "'tailwindcss/utilities'") {
+                atRule.name = "tailwind";
+                atRule.params = "utilities";
+            } else if (atRule.params === '"tailwindcss/screens"' || atRule.params === "'tailwindcss/screens'" || atRule.params === '"tailwindcss/variants"' || atRule.params === "'tailwindcss/variants'") {
+                atRule.name = "tailwind";
+                atRule.params = "variants";
+            }
+        }
+        if (atRule.name === "tailwind") {
+            if (atRule.params === "screens") {
+                atRule.params = "variants";
             }
             tailwindDirectives.add(atRule.params);
         }
         if ([
-            'layer',
-            'responsive',
-            'variants'
+            "layer",
+            "responsive",
+            "variants"
         ].includes(atRule.name)) {
             if ([
-                'responsive',
-                'variants'
+                "responsive",
+                "variants"
             ].includes(atRule.name)) {
                 _log.default.warn(`${atRule.name}-at-rule-deprecated`, [
                     `The \`@${atRule.name}\` directive has been deprecated in Tailwind CSS v3.0.`,
                     `Use \`@layer utilities\` or \`@layer components\` instead.`,
-                    'https://tailwindcss.com/docs/upgrade-guide#replace-variants-with-layer'
+                    "https://tailwindcss.com/docs/upgrade-guide#replace-variants-with-layer"
                 ]);
             }
             layerDirectives.add(atRule);
         }
     });
-    if (!tailwindDirectives.has('base') || !tailwindDirectives.has('components') || !tailwindDirectives.has('utilities')) {
+    if (!tailwindDirectives.has("base") || !tailwindDirectives.has("components") || !tailwindDirectives.has("utilities")) {
         for (let rule of layerDirectives){
-            if (rule.name === 'layer' && [
-                'base',
-                'components',
-                'utilities'
+            if (rule.name === "layer" && [
+                "base",
+                "components",
+                "utilities"
             ].includes(rule.params)) {
                 if (!tailwindDirectives.has(rule.params)) {
                     throw rule.error(`\`@layer ${rule.params}\` is used but no matching \`@tailwind ${rule.params}\` directive is present.`);
                 }
-            } else if (rule.name === 'responsive') {
-                if (!tailwindDirectives.has('utilities')) {
-                    throw rule.error('`@responsive` is used but `@tailwind utilities` is missing.');
+            } else if (rule.name === "responsive") {
+                if (!tailwindDirectives.has("utilities")) {
+                    throw rule.error("`@responsive` is used but `@tailwind utilities` is missing.");
                 }
-            } else if (rule.name === 'variants') {
-                if (!tailwindDirectives.has('utilities')) {
-                    throw rule.error('`@variants` is used but `@tailwind utilities` is missing.');
+            } else if (rule.name === "variants") {
+                if (!tailwindDirectives.has("utilities")) {
+                    throw rule.error("`@variants` is used but `@tailwind utilities` is missing.");
                 }
             }
         }