tailwindcss 0.0.0-insiders.ec1f7b0 → 0.0.0-insiders.ef325ea

package/CHANGELOG.md

@@ -7,6 +7,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+- Enforce the order of some variants (like `before` and `after`) ([#6018](https://github.com/tailwindlabs/tailwindcss/pull/6018))
+
+### Added
+
+- Add `placeholder` variant ([#6106](https://github.com/tailwindlabs/tailwindcss/pull/6106))
+- Add tuple syntax for configuring screens while guaranteeing order ([#5956](https://github.com/tailwindlabs/tailwindcss/pull/5956))
+
+## [3.0.0-alpha.2] - 2021-11-08
+
 ### Changed
 
 - Don't use pointer cursor on disabled buttons by default ([#5772](https://github.com/tailwindlabs/tailwindcss/pull/5772))
@@ -22,7 +33,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add all standard `cursor-*` values by default ([#5734](https://github.com/tailwindlabs/tailwindcss/pull/5734))
 - Add `grow-*` and `shrink-*` utilities, deprecate `flex-grow-*` and `flex-shrink-*` ([#5733](https://github.com/tailwindlabs/tailwindcss/pull/5733))
 - Add `text-decoration-color` utilities ([#5760](https://github.com/tailwindlabs/tailwindcss/pull/5760))
-- Add declarative `addVariant` syntax ([#5809](https://github.com/tailwindlabs/tailwindcss/pull/5809))
+- Add new declarative `addVariant` API ([#5809](https://github.com/tailwindlabs/tailwindcss/pull/5809))
+- Add first-class `print` variant for targeting printed media ([#5885](https://github.com/tailwindlabs/tailwindcss/pull/5885))
+- Add full color palette for `fill-*` and `stroke-*` utilities (#5933[](https://github.com/tailwindlabs/tailwindcss/pull/5933))
+- Add composable API for colored box shadows ([#5979](https://github.com/tailwindlabs/tailwindcss/pull/5979))
 
 ### Fixed
 
@@ -33,6 +47,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Allow `_` inside `url()` when using arbitrary values ([#5853](https://github.com/tailwindlabs/tailwindcss/pull/5853))
 - Prevent crashes when using comments in `@layer` AtRules ([#5854](https://github.com/tailwindlabs/tailwindcss/pull/5854))
 - Handle color transformations properly with `theme(...)` for all relevant plugins ([#4533](https://github.com/tailwindlabs/tailwindcss/pull/4533), [#5871](https://github.com/tailwindlabs/tailwindcss/pull/5871))
+- Ensure `@apply`-ing a utility with multiple definitions works ([#5870](https://github.com/tailwindlabs/tailwindcss/pull/5870))
 
 ## [3.0.0-alpha.1] - 2021-10-01
 
@@ -77,7 +92,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
-- Ensure `corePlugins`  order is consisent in AOT mode ([#5928](https://github.com/tailwindlabs/tailwindcss/pull/5928))
+- Ensure `corePlugins` order is consisent in AOT mode ([#5928](https://github.com/tailwindlabs/tailwindcss/pull/5928))
 
 ## [2.2.18] - 2021-10-29
 
@@ -1649,7 +1664,8 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.0-alpha.1...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.0-alpha.2...HEAD
+[3.0.0-alpha.2]: https://github.com/tailwindlabs/tailwindcss/compare/v3.0.0-alpha.1...v3.0.0-alpha.2
 [3.0.0-alpha.1]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.19...v3.0.0-alpha.1
 [2.2.19]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.18...v2.2.19
 [2.2.18]: https://github.com/tailwindlabs/tailwindcss/compare/v2.2.17...v2.2.18

package/lib/cli.js

@@ -110,7 +110,7 @@ function oneOf(...options) {
         manualParsing: true
     });
 }
-let commands = {
+let commands1 = {
     init: {
         run: init,
         args: {
@@ -187,30 +187,30 @@ if (process.stdout.isTTY /* Detect redirecting output to a file */  && (process.
             'tailwindcss [--input input.css] [--output output.css] [--watch] [options...]',
             'tailwindcss init [--full] [--postcss] [options...]', 
         ],
-        commands: Object.keys(commands).filter((command)=>command !== 'build'
+        commands: Object.keys(commands1).filter((command)=>command !== 'build'
         ).map((command)=>`${command} [options]`
         ),
         options: {
-            ...commands.build.args,
+            ...commands1.build.args,
             ...sharedFlags
         }
     });
     process.exit(0);
 }
-let command = ((arg = '')=>arg.startsWith('-') ? undefined : arg
+let command1 = ((arg = '')=>arg.startsWith('-') ? undefined : arg
 )(process.argv[2]) || 'build';
-if (commands[command] === undefined) {
-    if (_fs.default.existsSync(_path.default.resolve(command))) {
+if (commands1[command1] === undefined) {
+    if (_fs.default.existsSync(_path.default.resolve(command1))) {
         // TODO: Deprecate this in future versions
         // Check if non-existing command, might be a file.
-        command = 'build';
+        command1 = 'build';
     } else {
         help({
-            message: `Invalid command: ${command}`,
+            message: `Invalid command: ${command1}`,
             usage: [
                 'tailwindcss <command> [options]'
             ],
-            commands: Object.keys(commands).filter((command)=>command !== 'build'
+            commands: Object.keys(commands1).filter((command)=>command !== 'build'
             ).map((command)=>`${command} [options]`
             ),
             options: sharedFlags
@@ -219,11 +219,11 @@ if (commands[command] === undefined) {
     }
 }
 // Execute command
-let { args: flags , run  } = commands[command];
-let args = (()=>{
+let { args: flags1 , run  } = commands1[command1];
+let args1 = (()=>{
     try {
         let result = (0, _arg).default(Object.fromEntries(Object.entries({
-            ...flags,
+            ...flags1,
             ...sharedFlags
         }).filter(([_key, value])=>{
             var ref;
@@ -240,11 +240,11 @@ let args = (()=>{
             let flag = result['_'][i];
             if (!flag.startsWith('-')) continue;
             let flagName = flag;
-            let handler = flags[flag];
+            let handler = flags1[flag];
             // Resolve flagName & handler
             while(typeof handler === 'string'){
                 flagName = handler;
-                handler = flags[handler];
+                handler = flags1[handler];
             }
             if (!handler) continue;
             let args = [];
@@ -264,8 +264,8 @@ let args = (()=>{
         //
         // E.g.: tailwindcss input.css -> _: ['build', 'input.css']
         // E.g.: tailwindcss build input.css -> _: ['build', 'input.css']
-        if (result['_'][0] !== command) {
-            result['_'].unshift(command);
+        if (result['_'][0] !== command1) {
+            result['_'].unshift(command1);
         }
         return result;
     } catch (err) {
@@ -282,14 +282,14 @@ let args = (()=>{
         throw err;
     }
 })();
-if (args['--help']) {
+if (args1['--help']) {
     help({
         options: {
-            ...flags,
+            ...flags1,
             ...sharedFlags
         },
         usage: [
-            `tailwindcss ${command} [options]`
+            `tailwindcss ${command1} [options]`
         ]
     });
     process.exit(0);
@@ -299,17 +299,17 @@ run();
 function init() {
     let messages = [];
     var ref;
-    let tailwindConfigLocation = _path.default.resolve((ref = args['_'][1]) !== null && ref !== void 0 ? ref : './tailwind.config.js');
+    let tailwindConfigLocation = _path.default.resolve((ref = args1['_'][1]) !== null && ref !== void 0 ? ref : './tailwind.config.js');
     if (_fs.default.existsSync(tailwindConfigLocation)) {
         messages.push(`${_path.default.basename(tailwindConfigLocation)} already exists.`);
     } else {
-        let stubFile = _fs.default.readFileSync(args['--full'] ? _path.default.resolve(__dirname, '../stubs/defaultConfig.stub.js') : _path.default.resolve(__dirname, '../stubs/simpleConfig.stub.js'), 'utf8');
+        let stubFile = _fs.default.readFileSync(args1['--full'] ? _path.default.resolve(__dirname, '../stubs/defaultConfig.stub.js') : _path.default.resolve(__dirname, '../stubs/simpleConfig.stub.js'), 'utf8');
         // Change colors import
         stubFile = stubFile.replace('../colors', 'tailwindcss/colors');
         _fs.default.writeFileSync(tailwindConfigLocation, stubFile, 'utf8');
         messages.push(`Created Tailwind CSS config file: ${_path.default.basename(tailwindConfigLocation)}`);
     }
-    if (args['--postcss']) {
+    if (args1['--postcss']) {
         let postcssConfigLocation = _path.default.resolve('./postcss.config.js');
         if (_fs.default.existsSync(postcssConfigLocation)) {
             messages.push(`${_path.default.basename(postcssConfigLocation)} already exists.`);
@@ -327,27 +327,27 @@ function init() {
     }
 }
 async function build() {
-    let input = args['--input'];
-    let output = args['--output'];
-    let shouldWatch = args['--watch'];
-    let includePostCss = args['--postcss'];
+    let input = args1['--input'];
+    let output = args1['--output'];
+    let shouldWatch = args1['--watch'];
+    let includePostCss = args1['--postcss'];
     // TODO: Deprecate this in future versions
-    if (!input && args['_'][1]) {
+    if (!input && args1['_'][1]) {
         console.error('[deprecation] Running tailwindcss without -i, please provide an input file.');
-        input = args['--input'] = args['_'][1];
+        input = args1['--input'] = args1['_'][1];
     }
     if (input && !_fs.default.existsSync(input = _path.default.resolve(input))) {
-        console.error(`Specified input file ${args['--input']} does not exist.`);
+        console.error(`Specified input file ${args1['--input']} does not exist.`);
         process.exit(9);
     }
-    if (args['--config'] && !_fs.default.existsSync(args['--config'] = _path.default.resolve(args['--config']))) {
-        console.error(`Specified config file ${args['--config']} does not exist.`);
+    if (args1['--config'] && !_fs.default.existsSync(args1['--config'] = _path.default.resolve(args1['--config']))) {
+        console.error(`Specified config file ${args1['--config']} does not exist.`);
         process.exit(9);
     }
-    let configPath = args['--config'] ? args['--config'] : ((defaultPath)=>_fs.default.existsSync(defaultPath) ? defaultPath : null
+    let configPath = args1['--config'] ? args1['--config'] : ((defaultPath)=>_fs.default.existsSync(defaultPath) ? defaultPath : null
     )(_path.default.resolve('./tailwind.config.js'));
     async function loadPostCssPlugins() {
-        let customPostCssPath = typeof args['--postcss'] === 'string' ? args['--postcss'] : undefined;
+        let customPostCssPath = typeof args1['--postcss'] === 'string' ? args1['--postcss'] : undefined;
         let { plugins: configPlugins  } = customPostCssPath ? await (async ()=>{
             let file = _path.default.resolve(customPostCssPath);
             // Implementation, see: https://unpkg.com/browse/postcss-load-config@3.0.1/src/index.js
@@ -386,17 +386,17 @@ async function build() {
         let config = configPath ? require(configPath) : {
         };
         let resolvedConfig = (0, _resolveConfig).default(config);
-        if (args['--purge']) {
+        if (args1['--purge']) {
             _log.default.warn('purge-flag-deprecated', [
                 'The `--purge` flag has been deprecated.',
                 'Please use `--content` instead.', 
             ]);
-            if (!args['--content']) {
-                args['--content'] = args['--purge'];
+            if (!args1['--content']) {
+                args1['--content'] = args1['--purge'];
             }
         }
-        if (args['--content']) {
-            resolvedConfig.content.files = args['--content'].split(/(?<!{[^}]+),/);
+        if (args1['--content']) {
+            resolvedConfig.content.files = args1['--content'].split(/(?<!{[^}]+),/);
         }
         return resolvedConfig;
     }
@@ -457,9 +457,9 @@ async function build() {
         let plugins = [
             ...beforePlugins,
             tailwindPlugin,
-            !args['--minify'] && formatNodes,
+            !args1['--minify'] && formatNodes,
             ...afterPlugins,
-            !args['--no-autoprefixer'] && (()=>{
+            !args1['--no-autoprefixer'] && (()=>{
                 // Try to load a local `autoprefixer` version first
                 try {
                     return require('autoprefixer');
@@ -467,7 +467,7 @@ async function build() {
                 }
                 return (0, _indexJs).lazyAutoprefixer();
             })(),
-            args['--minify'] && (()=>{
+            args1['--minify'] && (()=>{
                 let options = {
                     preset: [
                         'default',
@@ -510,8 +510,8 @@ async function build() {
                 console.error('Done in', (end - start) / BigInt(1000000) + 'ms.');
             });
         }
-        let css = input ? _fs.default.readFileSync(_path.default.resolve(input), 'utf8') : '@tailwind base; @tailwind components; @tailwind utilities';
-        return processCSS(css);
+        let css1 = input ? _fs.default.readFileSync(_path.default.resolve(input), 'utf8') : '@tailwind base; @tailwind components; @tailwind utilities';
+        return processCSS(css1);
     }
     let context = null;
     async function startWatcher() {
@@ -521,8 +521,8 @@ async function build() {
         let watcher = null;
         function refreshConfig() {
             env.DEBUG && console.time('Module dependencies');
-            for (let file of configDependencies){
-                delete require.cache[require.resolve(file)];
+            for (let file1 of configDependencies){
+                delete require.cache[require.resolve(file1)];
             }
             if (configPath) {
                 configDependencies = (0, _getModuleDependencies).default(configPath).map(({ file  })=>file
@@ -541,9 +541,9 @@ async function build() {
         let plugins = [
             ...beforePlugins,
             '__TAILWIND_PLUGIN_POSITION__',
-            !args['--minify'] && formatNodes,
+            !args1['--minify'] && formatNodes,
             ...afterPlugins,
-            !args['--no-autoprefixer'] && (()=>{
+            !args1['--no-autoprefixer'] && (()=>{
                 // Try to load a local `autoprefixer` version first
                 try {
                     return require('autoprefixer');
@@ -551,7 +551,7 @@ async function build() {
                 }
                 return (0, _indexJs).lazyAutoprefixer();
             })(),
-            args['--minify'] && (()=>{
+            args1['--minify'] && (()=>{
                 let options = {
                     preset: [
                         'default',
@@ -636,18 +636,18 @@ async function build() {
                     }
                 });
             }
-            let css = input ? _fs.default.readFileSync(_path.default.resolve(input), 'utf8') : '@tailwind base; @tailwind components; @tailwind utilities';
-            let result1 = await processCSS(css);
+            let css2 = input ? _fs.default.readFileSync(_path.default.resolve(input), 'utf8') : '@tailwind base; @tailwind components; @tailwind utilities';
+            let result1 = await processCSS(css2);
             env.DEBUG && console.timeEnd('Finished in');
             return result1;
         }
-        let config = refreshConfig(configPath);
+        let config1 = refreshConfig(configPath);
         if (input) {
             contextDependencies.add(_path.default.resolve(input));
         }
         watcher = _chokidar.default.watch([
             ...contextDependencies,
-            ...extractFileGlobs(config)
+            ...extractFileGlobs(config1)
         ], {
             ignoreInitial: true,
             awaitWriteFinish: process.platform === 'win32' ? {
@@ -660,16 +660,16 @@ async function build() {
             if (contextDependencies.has(file)) {
                 env.DEBUG && console.time('Resolve config');
                 context = null;
-                config = refreshConfig(configPath);
+                config1 = refreshConfig(configPath);
                 env.DEBUG && console.timeEnd('Resolve config');
                 env.DEBUG && console.time('Watch new files');
-                let globs = extractFileGlobs(config);
+                let globs = extractFileGlobs(config1);
                 watcher.add(configDependencies);
                 watcher.add(globs);
                 env.DEBUG && console.timeEnd('Watch new files');
                 chain = chain.then(async ()=>{
-                    changedContent.push(...getChangedContent(config));
-                    await rebuild(config);
+                    changedContent.push(...getChangedContent(config1));
+                    await rebuild(config1);
                 });
             } else {
                 chain = chain.then(async ()=>{
@@ -677,7 +677,7 @@ async function build() {
                         content: _fs.default.readFileSync(_path.default.resolve(file), 'utf8'),
                         extension: _path.default.extname(file).slice(1)
                     });
-                    await rebuild(config);
+                    await rebuild(config1);
                 });
             }
         });
@@ -687,12 +687,12 @@ async function build() {
                     content: _fs.default.readFileSync(_path.default.resolve(file), 'utf8'),
                     extension: _path.default.extname(file).slice(1)
                 });
-                await rebuild(config);
+                await rebuild(config1);
             });
         });
         chain = chain.then(()=>{
-            changedContent.push(...getChangedContent(config));
-            return rebuild(config);
+            changedContent.push(...getChangedContent(config1));
+            return rebuild(config1);
         });
     }
     if (shouldWatch) {

package/lib/constants.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.simpleConfigStubFile = exports.defaultPostCssConfigFile = exports.defaultConfigStubFile = exports.supportedPostCssConfigFile = exports.cjsConfigFile = exports.supportedConfigFiles = exports.defaultPostCssConfigStubFile = exports.cli = exports.cjsPostCssConfigFile = exports.defaultConfigFile = void 0;
+exports.defaultPostCssConfigStubFile = exports.simpleConfigStubFile = exports.defaultConfigStubFile = exports.supportedPostCssConfigFile = exports.supportedConfigFiles = exports.cjsPostCssConfigFile = exports.cjsConfigFile = exports.defaultPostCssConfigFile = exports.defaultConfigFile = exports.cli = void 0;
 var _path = _interopRequireDefault(require("path"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {

package/lib/corePluginList.js

@@ -135,6 +135,7 @@ var _default = [
     "backgroundBlendMode",
     "mixBlendMode",
     "boxShadow",
+    "boxShadowColor",
     "outlineStyle",
     "outlineWidth",
     "outlineOffset",

package/lib/corePlugins.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.variantPlugins = exports.corePlugins = void 0;
+exports.corePlugins = exports.variantPlugins = void 0;
 var _fs = _interopRequireDefault(require("fs"));
 var path = _interopRequireWildcard(require("path"));
 var _postcss = _interopRequireDefault(require("postcss"));
@@ -16,6 +16,8 @@ var _isPlainObject = _interopRequireDefault(require("./util/isPlainObject"));
 var _transformThemeValue = _interopRequireDefault(require("./util/transformThemeValue"));
 var _packageJson = require("../package.json");
 var _log = _interopRequireDefault(require("./util/log"));
+var _normalizeScreens = require("./util/normalizeScreens");
+var _parseBoxShadowValue = require("./util/parseBoxShadowValue");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -57,6 +59,7 @@ let variantPlugins = {
             '&::selection'
         ]);
         addVariant('file', '&::file-selector-button');
+        addVariant('placeholder', '&::placeholder');
         addVariant('before', ({ container  })=>{
             container.walkRules((rule)=>{
                 let foundContent = false;
@@ -196,15 +199,14 @@ let variantPlugins = {
         addVariant('print', '@media print');
     },
     screenVariants: ({ theme , addVariant  })=>{
-        for(let screen in theme('screens')){
-            let size = theme('screens')[screen];
-            let query = (0, _buildMediaQuery).default(size);
-            addVariant(screen, `@media ${query}`);
+        for (let screen of (0, _normalizeScreens).normalizeScreens(theme('screens'))){
+            let query = (0, _buildMediaQuery).default(screen);
+            addVariant(screen.name, `@media ${query}`);
         }
     }
 };
 exports.variantPlugins = variantPlugins;
-let corePlugins = {
+let corePlugins1 = {
     preflight: ({ addBase  })=>{
         let preflightStyles = _postcss.default.parse(_fs.default.readFileSync(path.join(__dirname, './css/preflight.css'), 'utf8'));
         addBase([
@@ -215,27 +217,11 @@ let corePlugins = {
         ]);
     },
     container: (()=>{
-        function extractMinWidths(breakpoints) {
-            return Object.values(breakpoints !== null && breakpoints !== void 0 ? breakpoints : {
-            }).flatMap((breakpoints)=>{
-                if (typeof breakpoints === 'string') {
-                    breakpoints = {
-                        min: breakpoints
-                    };
-                }
-                if (!Array.isArray(breakpoints)) {
-                    breakpoints = [
-                        breakpoints
-                    ];
-                }
-                return breakpoints.filter((breakpoint)=>{
-                    var ref;
-                    return (breakpoint === null || breakpoint === void 0 ? void 0 : (ref = breakpoint.hasOwnProperty) === null || ref === void 0 ? void 0 : ref.call(breakpoint, 'min')) || (breakpoint === null || breakpoint === void 0 ? void 0 : breakpoint.hasOwnProperty('min-width'));
-                }).map((breakpoint)=>{
-                    var ref;
-                    return (ref = breakpoint['min-width']) !== null && ref !== void 0 ? ref : breakpoint.min;
-                });
-            });
+        function extractMinWidths(breakpoints = []) {
+            return breakpoints.flatMap((breakpoint1)=>breakpoint1.values.map((breakpoint)=>breakpoint.min
+                )
+            ).filter((v)=>v !== undefined
+            );
         }
         function mapMinWidthsToPadding(minWidths, screens, paddings) {
             if (typeof paddings === 'undefined') {
@@ -259,25 +245,25 @@ let corePlugins = {
                 });
             }
             for (let minWidth of minWidths){
-                for (let [screen, value] of Object.entries(screens)){
-                    let screenMinWidth = typeof value === 'object' && value !== null ? value.min || value['min-width'] : value;
-                    if (`${screenMinWidth}` === `${minWidth}`) {
-                        mapping.push({
-                            screen,
-                            minWidth,
-                            padding: paddings[screen]
-                        });
+                for (let screen of screens){
+                    for (let { min  } of screen.values){
+                        if (min === minWidth) {
+                            mapping.push({
+                                minWidth,
+                                padding: paddings[screen.name]
+                            });
+                        }
                     }
                 }
             }
             return mapping;
         }
         return function({ addComponents , theme  }) {
-            let screens = theme('container.screens', theme('screens'));
+            let screens = (0, _normalizeScreens).normalizeScreens(theme('container.screens', theme('screens')));
             let minWidths = extractMinWidths(screens);
             let paddings = mapMinWidthsToPadding(minWidths, screens, theme('container.padding'));
             let generatePaddingFor = (minWidth)=>{
-                let paddingConfig = paddings.find((padding)=>`${padding.minWidth}` === `${minWidth}`
+                let paddingConfig = paddings.find((padding)=>padding.minWidth === minWidth
                 );
                 if (!paddingConfig) {
                     return {
@@ -989,8 +975,8 @@ let corePlugins = {
             ];
         }));
         matchUtilities({
-            animate: (value)=>{
-                let animations = (0, _parseAnimationValue).default(value);
+            animate: (value1)=>{
+                let animations = (0, _parseAnimationValue).default(value1);
                 return [
                     ...animations.flatMap((animation)=>keyframes[animation.name]
                     ),
@@ -2995,24 +2981,52 @@ let corePlugins = {
                 '@defaults box-shadow': {
                     '--tw-ring-offset-shadow': '0 0 #0000',
                     '--tw-ring-shadow': '0 0 #0000',
-                    '--tw-shadow': '0 0 #0000'
+                    '--tw-shadow': '0 0 #0000',
+                    '--tw-shadow-colored': '0 0 #0000'
                 }
             });
             matchUtilities({
                 shadow: (value)=>{
                     value = transformValue(value);
+                    let ast = (0, _parseBoxShadowValue).parseBoxShadowValue(value);
+                    for (let shadow of ast){
+                        // Don't override color if the whole shadow is a variable
+                        if (!shadow.valid) {
+                            continue;
+                        }
+                        shadow.color = 'var(--tw-shadow-color)';
+                    }
                     return {
                         '@defaults box-shadow': {
                         },
                         '--tw-shadow': value === 'none' ? '0 0 #0000' : value,
+                        '--tw-shadow-colored': value === 'none' ? '0 0 #0000' : (0, _parseBoxShadowValue).formatBoxShadowValue(ast),
                         'box-shadow': defaultBoxShadow
                     };
                 }
             }, {
-                values: theme('boxShadow')
+                values: theme('boxShadow'),
+                type: [
+                    'shadow'
+                ]
             });
         };
     })(),
+    boxShadowColor: ({ matchUtilities , theme  })=>{
+        matchUtilities({
+            shadow: (value)=>{
+                return {
+                    '--tw-shadow-color': (0, _toColorValue).default(value),
+                    '--tw-shadow': 'var(--tw-shadow-colored)'
+                };
+            }
+        }, {
+            values: (0, _flattenColorPalette).default(theme('boxShadowColor')),
+            type: [
+                'color'
+            ]
+        });
+    },
     outlineStyle: ({ addUtilities  })=>{
         addUtilities({
             '.outline-none': {
@@ -3089,7 +3103,8 @@ let corePlugins = {
                 '--tw-ring-color': ringColorDefault,
                 '--tw-ring-offset-shadow': '0 0 #0000',
                 '--tw-ring-shadow': '0 0 #0000',
-                '--tw-shadow': '0 0 #0000'
+                '--tw-shadow': '0 0 #0000',
+                '--tw-shadow-colored': '0 0 #0000'
             }
         });
         matchUtilities({
@@ -3559,4 +3574,4 @@ let corePlugins = {
         ], 
     ])
 };
-exports.corePlugins = corePlugins;
+exports.corePlugins = corePlugins1;

package/lib/featureFlags.js

@@ -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;
 }

package/lib/lib/collapseDuplicateDeclarations.js

@@ -21,8 +21,8 @@ function collapseDuplicateDeclarations() {
                 }
                 seen.set(decl.prop, decl);
             });
-            for (let decl of droppable){
-                decl.remove();
+            for (let decl1 of droppable){
+                decl1.remove();
             }
         });
     };

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;
             });
         });