tailwindcss 3.0.7 → 3.0.11

package/CHANGELOG.md

@@ -9,6 +9,44 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Nothing yet!
 
+## [3.0.11] - 2022-01-05
+
+### Fixed
+
+- Preserve case of css variables added by plugins ([#6888](https://github.com/tailwindlabs/tailwindcss/pull/6888))
+- Ignore content files that don't exist ([#6901](https://github.com/tailwindlabs/tailwindcss/pull/6901))
+- Revert apply defaults in isolation ([9fdc391](https://github.com/tailwindlabs/tailwindcss/commit/9fdc391d4ff93e7e350f5ce439060176b1f0162f))
+
+## [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
@@ -1741,7 +1779,11 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.7...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.11...HEAD
+[3.0.11]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.10...v3.0.11
+[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

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

@@ -15,10 +15,12 @@ const PATTERNS = [
     /([^<>"'`\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,
+    /([^<>"'`\s]*[^"'`\s:\\])/.source, 
 ].join('|');
 const BROAD_MATCH_GLOBAL_REGEXP = new RegExp(PATTERNS, 'g');
 const INNER_MATCH_GLOBAL_REGEXP = /[^<>"'`\s.(){}[\]#=%$]*[^<>"'`\s.(){}[\]#=%:$]/g;
@@ -31,4 +33,10 @@ function defaultExtractor(content) {
     ].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

@@ -267,7 +267,7 @@ function processApply(root, context) {
                             // 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((thing)=>thing === applyCandidate
+                            if (!extractClasses(rule).some((candidate)=>candidate === applyCandidate
                             )) {
                                 rule.remove();
                                 return;

package/lib/lib/expandTailwindAtRules.js

@@ -143,14 +143,23 @@ 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
         )) {

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/setupContextUtils.js

@@ -463,11 +463,17 @@ function getFileModifiedMap(context) {
 function trackModified(files, fileModifiedMap) {
     let changed = false;
     for (let file of files){
+        var ref;
         if (!file) continue;
         let parsed = _url.default.parse(file);
         let pathname = parsed.hash ? parsed.href.replace(parsed.hash, '') : parsed.href;
         pathname = parsed.search ? pathname.replace(parsed.search, '') : pathname;
-        let newModified = _fs.default.statSync(decodeURIComponent(pathname)).mtimeMs;
+        let newModified = (ref = _fs.default.statSync(decodeURIComponent(pathname), {
+            throwIfNoEntry: false
+        })) === null || ref === void 0 ? void 0 : ref.mtimeMs;
+        if (!newModified) {
+            continue;
+        }
         if (!fileModifiedMap.has(file) || newModified > fileModifiedMap.get(file)) {
             changed = true;
         }

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){

package/lib/lib/sharedState.js

@@ -2,13 +2,11 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+exports.resolveDebug = resolveDebug;
 exports.contextSourcesMap = exports.configContextMap = exports.contextMap = exports.env = void 0;
 const env = {
-    TAILWIND_MODE: process.env.TAILWIND_MODE,
     NODE_ENV: process.env.NODE_ENV,
-    DEBUG: process.env.DEBUG !== undefined && process.env.DEBUG !== '0',
-    TAILWIND_DISABLE_TOUCH: process.env.TAILWIND_DISABLE_TOUCH !== undefined,
-    TAILWIND_TOUCH_DIR: process.env.TAILWIND_TOUCH_DIR
+    DEBUG: resolveDebug(process.env.DEBUG)
 };
 exports.env = env;
 const contextMap = new Map();
@@ -17,3 +15,34 @@ const configContextMap = new Map();
 exports.configContextMap = configContextMap;
 const contextSourcesMap = new Map();
 exports.contextSourcesMap = contextSourcesMap;
+function resolveDebug(debug) {
+    if (debug === undefined) {
+        return false;
+    }
+    // Environment variables are strings, so convert to boolean
+    if (debug === 'true' || debug === '1') {
+        return true;
+    }
+    if (debug === 'false' || debug === '0') {
+        return false;
+    }
+    // Keep the debug convention into account:
+    // DEBUG=* -> This enables all debug modes
+    // DEBUG=projectA,projectB,projectC -> This enables debug for projectA, projectB and projectC
+    // DEBUG=projectA:* -> This enables all debug modes for projectA (if you have sub-types)
+    // DEBUG=projectA,-projectB -> This enables debug for projectA and explicitly disables it for projectB
+    if (debug === '*') {
+        return true;
+    }
+    let debuggers = debug.split(',').map((d)=>d.split(':')[0]
+    );
+    // Ignoring tailwindcss
+    if (debuggers.includes('-tailwindcss')) {
+        return false;
+    }
+    // Including tailwindcss
+    if (debuggers.includes('tailwindcss')) {
+        return true;
+    }
+    return false;
+}

package/lib/processTailwindFeatures.js

@@ -21,9 +21,10 @@ function _interopRequireDefault(obj) {
 }
 function processTailwindFeatures(setupContext) {
     return function(root, result) {
-        let tailwindDirectives = (0, _normalizeTailwindDirectives).default(root);
+        let { tailwindDirectives , applyDirectives  } = (0, _normalizeTailwindDirectives).default(root);
         let context = setupContext({
             tailwindDirectives,
+            applyDirectives,
             registerDependency (dependency) {
                 result.messages.push({
                     plugin: 'tailwindcss',

package/lib/util/color.js

@@ -15,7 +15,8 @@ let SHORT_HEX = /^#([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i;
 let VALUE = `(?:\\d+|\\d*\\.\\d+)%?`;
 let SEP = `(?:\\s*,\\s*|\\s+)`;
 let ALPHA_SEP = `\\s*[,/]\\s*`;
-let RGB_HSL = new RegExp(`^(rgb|hsl)a?\\(\\s*(${VALUE})${SEP}(${VALUE})${SEP}(${VALUE})(?:${ALPHA_SEP}(${VALUE}))?\\s*\\)$`);
+let RGB = new RegExp(`^rgba?\\(\\s*(${VALUE})${SEP}(${VALUE})${SEP}(${VALUE})(?:${ALPHA_SEP}(${VALUE}))?\\s*\\)$`);
+let HSL = new RegExp(`^hsla?\\(\\s*((?:${VALUE})(?:deg|rad|grad|turn)?)${SEP}(${VALUE})${SEP}(${VALUE})(?:${ALPHA_SEP}(${VALUE}))?\\s*\\)$`);
 function parseColor(value) {
     if (typeof value !== 'string') {
         return null;
@@ -62,18 +63,32 @@ function parseColor(value) {
             alpha: hex[4] ? (parseInt(hex[4], 16) / 255).toString() : undefined
         };
     }
-    let match = value.match(RGB_HSL);
-    if (match !== null) {
+    let rgbMatch = value.match(RGB);
+    if (rgbMatch !== null) {
         var ref, ref1;
         return {
-            mode: match[1],
+            mode: 'rgb',
+            color: [
+                rgbMatch[1],
+                rgbMatch[2],
+                rgbMatch[3]
+            ].map((v)=>v.toString()
+            ),
+            alpha: (ref = rgbMatch[4]) === null || ref === void 0 ? void 0 : (ref1 = ref.toString) === null || ref1 === void 0 ? void 0 : ref1.call(ref)
+        };
+    }
+    let hslMatch = value.match(HSL);
+    if (hslMatch !== null) {
+        var ref2, ref3;
+        return {
+            mode: 'hsl',
             color: [
-                match[2],
-                match[3],
-                match[4]
+                hslMatch[1],
+                hslMatch[2],
+                hslMatch[3]
             ].map((v)=>v.toString()
             ),
-            alpha: (ref = match[5]) === null || ref === void 0 ? void 0 : (ref1 = ref.toString) === null || ref1 === void 0 ? void 0 : ref1.call(ref)
+            alpha: (ref2 = hslMatch[4]) === null || ref2 === void 0 ? void 0 : (ref3 = ref2.toString) === null || ref3 === void 0 ? void 0 : ref3.call(ref2)
         };
     }
     return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "3.0.7",
+  "version": "3.0.11",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -25,7 +25,7 @@
     "prepublishOnly": "npm install --force && npm run swcify",
     "style": "eslint .",
     "pretest": "npm run generate:plugin-list",
-    "test": "cross-env TAILWIND_MODE=build jest",
+    "test": "jest",
     "test:integrations": "npm run test --prefix ./integrations",
     "install:integrations": "node scripts/install-integrations.js",
     "posttest": "npm run style",
@@ -43,22 +43,22 @@
     "*.js"
   ],
   "devDependencies": {
-    "@swc/cli": "^0.1.52",
+    "@swc/cli": "^0.1.55",
     "@swc/core": "^1.2.118",
-    "@swc/jest": "^0.2.11",
+    "@swc/jest": "^0.2.15",
     "@swc/register": "^0.1.7",
     "autoprefixer": "^10.4.0",
     "cross-env": "^7.0.3",
-    "cssnano": "^5.0.12",
+    "cssnano": "^5.0.14",
     "esbuild": "^0.14.2",
     "eslint": "^8.4.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "jest": "^27.4.3",
+    "jest": "^27.4.5",
     "jest-diff": "^27.4.2",
-    "postcss": "^8.4.4",
+    "postcss": "^8.4.5",
     "postcss-cli": "^8.3.1",
-    "prettier": "^2.5.0",
+    "prettier": "^2.5.1",
     "rimraf": "^3.0.0"
   },
   "peerDependencies": {
@@ -79,14 +79,13 @@
     "is-glob": "^4.0.3",
     "normalize-path": "^3.0.0",
     "object-hash": "^2.2.0",
-    "postcss-js": "^3.0.3",
+    "postcss-js": "^4.0.0",
     "postcss-load-config": "^3.1.0",
     "postcss-nested": "5.0.6",
     "postcss-selector-parser": "^6.0.7",
     "postcss-value-parser": "^4.2.0",
     "quick-lru": "^5.1.1",
-    "resolve": "^1.20.0",
-    "tmp": "^0.2.1"
+    "resolve": "^1.20.0"
   },
   "browserslist": [
     "> 1%",