tailwindcss 0.0.0-insiders.638c8f4 → 0.0.0-insiders.64b4e6d

package/CHANGELOG.md

@@ -22,15 +22,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Rewrite default class extractor ([#8204](https://github.com/tailwindlabs/tailwindcss/pull/8204))
 - Move `important` selector to the front when `@apply`-ing selector-modifying variants in custom utilities ([#8313](https://github.com/tailwindlabs/tailwindcss/pull/8313))
 - Error when registering an invalid custom variant ([#8345](https://github.com/tailwindlabs/tailwindcss/pull/8345))
+- Create tailwind.config.cjs file in ESM package when running init ([#8363](https://github.com/tailwindlabs/tailwindcss/pull/8363))
+- Fix `matchVariants` that use at-rules and placeholders ([#8392](https://github.com/tailwindlabs/tailwindcss/pull/8392))
+- Improve types of the `tailwindcss/plugin` ([#8400](https://github.com/tailwindlabs/tailwindcss/pull/8400))
+- Allow returning parallel variants from `addVariant` or `matchVariant` callback functions ([#8455](https://github.com/tailwindlabs/tailwindcss/pull/8455))
+- Try using local `postcss` installation first in the CLI ([#8270](https://github.com/tailwindlabs/tailwindcss/pull/8270))
+- Allow default ring color to be a function ([#7587](https://github.com/tailwindlabs/tailwindcss/pull/7587))
+- Don't inherit `to` value from parent gradients ([#8489](https://github.com/tailwindlabs/tailwindcss/pull/8489))
 
 ### Changed
 
-- Try using local `postcss` installation first in the CLI ([#8270](https://github.com/tailwindlabs/tailwindcss/pull/8270))
+- Only apply hover styles when supported (future) ([#8394](https://github.com/tailwindlabs/tailwindcss/pull/8394))
+- Respect default ring color opacity (future) ([#8448](https://github.com/tailwindlabs/tailwindcss/pull/8448), [3f4005e](https://github.com/tailwindlabs/tailwindcss/commit/3f4005e833445f7549219eb5ae89728cbb3a2630))
 
 ### Added
 
-- Allow default ring color to be a function ([#7587](https://github.com/tailwindlabs/tailwindcss/pull/7587))
-- Add `rgb` and `hsl` color helpers for CSS variables ([#7665](https://github.com/tailwindlabs/tailwindcss/pull/7665))
 - Support PostCSS `Document` nodes ([#7291](https://github.com/tailwindlabs/tailwindcss/pull/7291))
 - Add `text-start` and `text-end` utilities ([#6656](https://github.com/tailwindlabs/tailwindcss/pull/6656))
 - Support customizing class name when using `darkMode: 'class'` ([#5800](https://github.com/tailwindlabs/tailwindcss/pull/5800))
@@ -42,6 +48,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `grid-flow-dense` utility ([#8193](https://github.com/tailwindlabs/tailwindcss/pull/8193))
 - Add `mix-blend-plus-lighter` utility ([#8288](https://github.com/tailwindlabs/tailwindcss/pull/8288))
 - Add arbitrary variants ([#8299](https://github.com/tailwindlabs/tailwindcss/pull/8299))
+- Add experimental `matchVariant` API ([#8310](https://github.com/tailwindlabs/tailwindcss/pull/8310), [34fd0fb8](https://github.com/tailwindlabs/tailwindcss/commit/34fd0fb82aa574cddc5c7aa3ad7d1af5e3735e5d))
+- Add `prefers-contrast` media query variants ([#8410](https://github.com/tailwindlabs/tailwindcss/pull/8410))
+- Add opacity support when referencing colors with `theme` function ([#8416](https://github.com/tailwindlabs/tailwindcss/pull/8416))
+- Add `postcss-import` support to the CLI ([#8437](https://github.com/tailwindlabs/tailwindcss/pull/8437))
+- Add `optional` variant ([#8486](https://github.com/tailwindlabs/tailwindcss/pull/8486))
+- Add `<alpha-value>` placeholder support for custom colors ([#8501](https://github.com/tailwindlabs/tailwindcss/pull/8501))
 
 ## [3.0.24] - 2022-04-12
 

package/lib/cli-peer-dependencies.js

@@ -3,11 +3,15 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.lazyPostcss = lazyPostcss;
+exports.lazyPostcssImport = lazyPostcssImport;
 exports.lazyAutoprefixer = lazyAutoprefixer;
 exports.lazyCssnano = lazyCssnano;
 function lazyPostcss() {
     return require("postcss");
 }
+function lazyPostcssImport() {
+    return require("postcss-import");
+}
 function lazyAutoprefixer() {
     return require("autoprefixer");
 }

package/lib/cli.js

@@ -18,6 +18,7 @@ var _getModuleDependencies = _interopRequireDefault(require("./lib/getModuleDepe
 var _log = _interopRequireDefault(require("./util/log"));
 var _packageJson = _interopRequireDefault(require("../package.json"));
 var _normalizePath = _interopRequireDefault(require("normalize-path"));
+var _validateConfigJs = require("./util/validateConfig.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -26,6 +27,22 @@ function _interopRequireDefault(obj) {
 let env = {
     DEBUG: process.env.DEBUG !== undefined && process.env.DEBUG !== "0"
 };
+function isESM() {
+    const pkgPath = _path.default.resolve("./package.json");
+    try {
+        let pkg = JSON.parse(_fs.default.readFileSync(pkgPath, "utf8"));
+        return pkg.type && pkg.type === "module";
+    } catch (err) {
+        return false;
+    }
+}
+let configs = isESM() ? {
+    tailwind: "tailwind.config.cjs",
+    postcss: "postcss.config.cjs"
+} : {
+    tailwind: "tailwind.config.js",
+    postcss: "postcss.config.js"
+};
 // ---
 function indentRecursive(node, indent = 0) {
     node.each && node.each((child, i)=>{
@@ -55,10 +72,8 @@ function drainStdin() {
         process.stdin.on("data", (chunk)=>{
             result += chunk;
         });
-        process.stdin.on("end", ()=>resolve(result)
-        );
-        process.stdin.on("error", (err)=>reject(err)
-        );
+        process.stdin.on("end", ()=>resolve(result));
+        process.stdin.on("error", (err)=>reject(err));
     });
 }
 function help({ message , usage , commands: commands1 , options  }) {
@@ -143,15 +158,15 @@ let commands = {
         args: {
             "--full": {
                 type: Boolean,
-                description: "Initialize a full `tailwind.config.js` file"
+                description: `Initialize a full \`${configs.tailwind}\` file`
             },
             "--postcss": {
                 type: Boolean,
-                description: "Initialize a `postcss.config.js` file"
+                description: `Initialize a \`${configs.postcss}\` file`
             },
             "--types": {
                 type: Boolean,
-                description: "Add TypeScript types for the `tailwind.config.js` file"
+                description: `Add TypeScript types for the \`${configs.tailwind}\` file`
             },
             "-f": "--full",
             "-p": "--postcss"
@@ -216,16 +231,13 @@ let sharedFlags = {
     },
     "-h": "--help"
 };
-if (process.stdout.isTTY /* Detect redirecting output to a file */  && (process.argv[2] === undefined || process.argv.slice(2).every((flag)=>sharedFlags[flag] !== undefined
-))) {
+if (process.stdout.isTTY /* Detect redirecting output to a file */  && (process.argv[2] === undefined || process.argv.slice(2).every((flag)=>sharedFlags[flag] !== undefined))) {
     help({
         usage: [
             "tailwindcss [--input input.css] [--output output.css] [--watch] [options...]",
             "tailwindcss init [--full] [--postcss] [--types] [options...]", 
         ],
-        commands: Object.keys(commands).filter((command2)=>command2 !== "build"
-        ).map((command3)=>`${command3} [options]`
-        ),
+        commands: Object.keys(commands).filter((command2)=>command2 !== "build").map((command3)=>`${command3} [options]`),
         options: {
             ...commands.build.args,
             ...sharedFlags
@@ -233,8 +245,7 @@ if (process.stdout.isTTY /* Detect redirecting output to a file */  && (process.
     });
     process.exit(0);
 }
-let command = ((arg = "")=>arg.startsWith("-") ? undefined : arg
-)(process.argv[2]) || "build";
+let command = ((arg = "")=>arg.startsWith("-") ? undefined : arg)(process.argv[2]) || "build";
 if (commands[command] === undefined) {
     if (_fs.default.existsSync(_path.default.resolve(command))) {
         // TODO: Deprecate this in future versions
@@ -246,9 +257,7 @@ if (commands[command] === undefined) {
             usage: [
                 "tailwindcss <command> [options]"
             ],
-            commands: Object.keys(commands).filter((command4)=>command4 !== "build"
-            ).map((command5)=>`${command5} [options]`
-            ),
+            commands: Object.keys(commands).filter((command4)=>command4 !== "build").map((command5)=>`${command5} [options]`),
             options: sharedFlags
         });
         process.exit(1);
@@ -267,8 +276,7 @@ let args = (()=>{
         }).map(([key, value])=>[
                 key,
                 typeof value === "object" ? value.type : value
-            ]
-        )), {
+            ])), {
             permissive: true
         });
         // Manual parsing of flags to allow for special flags like oneOf(Boolean, String)
@@ -335,7 +343,7 @@ 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 = args["_"][1]) !== null && ref !== void 0 ? ref : `./${configs.tailwind}`);
     if (_fs.default.existsSync(tailwindConfigLocation)) {
         messages.push(`${_path.default.basename(tailwindConfigLocation)} already exists.`);
     } else {
@@ -350,7 +358,7 @@ function init() {
         messages.push(`Created Tailwind CSS config file: ${_path.default.basename(tailwindConfigLocation)}`);
     }
     if (args["--postcss"]) {
-        let postcssConfigLocation = _path.default.resolve("./postcss.config.js");
+        let postcssConfigLocation = _path.default.resolve(`./${configs.postcss}`);
         if (_fs.default.existsSync(postcssConfigLocation)) {
             messages.push(`${_path.default.basename(postcssConfigLocation)} already exists.`);
         } else {
@@ -389,8 +397,7 @@ async function build() {
         console.error(`Specified config file ${args["--config"]} does not exist.`);
         process.exit(9);
     }
-    let configPath = args["--config"] ? args["--config"] : ((defaultPath)=>_fs.default.existsSync(defaultPath) ? defaultPath : null
-    )(_path.default.resolve("./tailwind.config.js"));
+    let configPath = args["--config"] ? args["--config"] : ((defaultPath)=>_fs.default.existsSync(defaultPath) ? defaultPath : null)(_path.default.resolve(`./${configs.tailwind}`));
     async function loadPostCssPlugins() {
         let customPostCssPath = typeof args["--postcss"] === "string" ? args["--postcss"] : undefined;
         let config1 = customPostCssPath ? await (async ()=>{
@@ -448,9 +455,12 @@ async function build() {
                 }
             });
             resolvedConfig.content.files = files;
+            resolvedConfig = (0, _validateConfigJs).validateConfig(resolvedConfig);
             return resolvedConfig;
         }
-        return (0, _resolveConfig).default(config);
+        let resolvedConfig = (0, _resolveConfig).default(config);
+        resolvedConfig = (0, _validateConfigJs).validateConfig(resolvedConfig);
+        return resolvedConfig;
     }
     function extractFileGlobs(config) {
         return config.content.files.filter((file)=>{
@@ -458,8 +468,7 @@ async function build() {
             // like an object it's probably a raw content object. But this object
             // is not watchable, so let's remove it.
             return typeof file === "string";
-        }).map((glob)=>(0, _normalizePath).default(glob)
-        );
+        }).map((glob)=>(0, _normalizePath).default(glob));
     }
     function extractRawContent(config) {
         return config.content.files.filter((file)=>{
@@ -503,9 +512,16 @@ async function build() {
         };
         tailwindPlugin.postcss = true;
         let [beforePlugins, afterPlugins, postcssOptions] = includePostCss ? await loadPostCssPlugins() : [
+            [
+                (()=>{
+                    try {
+                        return require("postcss-import");
+                    } catch  {}
+                    return (0, _indexJs).lazyPostcssImport();
+                })(), 
+            ],
             [],
-            [],
-            {}
+            {}, 
         ];
         let plugins = [
             ...beforePlugins,
@@ -541,13 +557,11 @@ async function build() {
             let start = process.hrtime.bigint();
             return Promise.resolve().then(()=>output ? _fs.default.promises.mkdir(_path.default.dirname(output), {
                     recursive: true
-                }) : null
-            ).then(()=>processor.process(css, {
+                }) : null).then(()=>processor.process(css, {
                     ...postcssOptions,
                     from: input,
                     to: output
-                })
-            ).then((result)=>{
+                })).then((result)=>{
                 if (!output) {
                     return process.stdout.write(result.css);
                 }
@@ -558,7 +572,7 @@ async function build() {
             }).then(()=>{
                 let end = process.hrtime.bigint();
                 console.error();
-                console.error("Done in", (end - start) / BigInt(1000000) + "ms.");
+                console.error("Done in", (end - start) / BigInt(1e6) + "ms.");
             });
         }
         let css1 = await (()=>{
@@ -587,8 +601,7 @@ async function build() {
                 delete require.cache[require.resolve(file1)];
             }
             if (configPath) {
-                configDependencies = (0, _getModuleDependencies).default(configPath).map(({ file  })=>file
-                );
+                configDependencies = (0, _getModuleDependencies).default(configPath).map(({ file  })=>file);
                 for (let dependency of configDependencies){
                     contextDependencies.add(dependency);
                 }
@@ -663,12 +676,10 @@ async function build() {
                 let start = process.hrtime.bigint();
                 return Promise.resolve().then(()=>output ? _fs.default.promises.mkdir(_path.default.dirname(output), {
                         recursive: true
-                    }) : null
-                ).then(()=>processor.process(css, {
+                    }) : null).then(()=>processor.process(css, {
                         from: input,
                         to: output
-                    })
-                ).then(async (result)=>{
+                    })).then(async (result)=>{
                     for (let message of result.messages){
                         if (message.type === "dependency") {
                             contextDependencies.add(message.file);
@@ -686,7 +697,7 @@ async function build() {
                     ].filter(Boolean));
                 }).then(()=>{
                     let end = process.hrtime.bigint();
-                    console.error("Done in", (end - start) / BigInt(1000000) + "ms.");
+                    console.error("Done in", (end - start) / BigInt(1e6) + "ms.");
                 }).catch((err)=>{
                     if (err.name === "CssSyntaxError") {
                         console.error(err.toString());
@@ -768,8 +779,7 @@ async function build() {
         });
     }
     if (shouldWatch) {
-        /* Abort the watcher if stdin is closed to avoid zombie processes */ process.stdin.on("end", ()=>process.exit(0)
-        );
+        /* Abort the watcher if stdin is closed to avoid zombie processes */ process.stdin.on("end", ()=>process.exit(0));
         process.stdin.resume();
         startWatcher();
     } else {

package/lib/corePlugins.js

@@ -19,31 +19,50 @@ var _packageJson = require("../package.json");
 var _log = _interopRequireDefault(require("./util/log"));
 var _normalizeScreens = require("./util/normalizeScreens");
 var _parseBoxShadowValue = require("./util/parseBoxShadowValue");
+var _featureFlags = require("./featureFlags");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
+function _getRequireWildcardCache() {
+    if (typeof WeakMap !== "function") return null;
+    var cache = new WeakMap();
+    _getRequireWildcardCache = function() {
+        return cache;
+    };
+    return cache;
+}
 function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
-    } else {
-        var newObj = {};
-        if (obj != null) {
-            for(var key in obj){
-                if (Object.prototype.hasOwnProperty.call(obj, key)) {
-                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
-                    if (desc.get || desc.set) {
-                        Object.defineProperty(newObj, key, desc);
-                    } else {
-                        newObj[key] = obj[key];
-                    }
-                }
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache();
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
             }
         }
-        newObj.default = obj;
-        return newObj;
     }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
 }
 let variantPlugins = {
     pseudoElementVariants: ({ addVariant  })=>{
@@ -91,28 +110,28 @@ let variantPlugins = {
             return "&::after";
         });
     },
-    pseudoClassVariants: ({ addVariant  })=>{
+    pseudoClassVariants: ({ addVariant , config  })=>{
         let pseudoVariants = [
             // Positional
             [
                 "first",
-                ":first-child"
+                "&:first-child"
             ],
             [
                 "last",
-                ":last-child"
+                "&:last-child"
             ],
             [
                 "only",
-                ":only-child"
+                "&:only-child"
             ],
             [
                 "odd",
-                ":nth-child(odd)"
+                "&:nth-child(odd)"
             ],
             [
                 "even",
-                ":nth-child(even)"
+                "&:nth-child(even)"
             ],
             "first-of-type",
             "last-of-type",
@@ -137,13 +156,13 @@ let variantPlugins = {
                             }
                         }
                     });
-                    return ":visited";
+                    return "&:visited";
                 }, 
             ],
             "target",
             [
                 "open",
-                "[open]"
+                "&[open]"
             ],
             // Forms
             "default",
@@ -151,6 +170,7 @@ let variantPlugins = {
             "indeterminate",
             "placeholder-shown",
             "autofill",
+            "optional",
             "required",
             "valid",
             "invalid",
@@ -161,7 +181,10 @@ let variantPlugins = {
             "empty",
             // Interactive
             "focus-within",
-            "hover",
+            [
+                "hover",
+                !(0, _featureFlags).flagEnabled(config(), "hoverOnlyWhenSupported") ? "&:hover" : "@media (hover: hover) and (pointer: fine) { &:hover }", 
+            ],
             "focus",
             "focus-visible",
             "active",
@@ -169,25 +192,24 @@ let variantPlugins = {
             "disabled", 
         ].map((variant)=>Array.isArray(variant) ? variant : [
                 variant,
-                `:${variant}`
-            ]
-        );
+                `&:${variant}`
+            ]);
         for (let [variantName, state] of pseudoVariants){
             addVariant(variantName, (ctx)=>{
                 let result = typeof state === "function" ? state(ctx) : state;
-                return `&${result}`;
+                return result;
             });
         }
         for (let [variantName1, state1] of pseudoVariants){
             addVariant(`group-${variantName1}`, (ctx)=>{
                 let result = typeof state1 === "function" ? state1(ctx) : state1;
-                return `:merge(.group)${result} &`;
+                return result.replace(/&(\S+)/, ":merge(.group)$1 &");
             });
         }
         for (let [variantName2, state2] of pseudoVariants){
             addVariant(`peer-${variantName2}`, (ctx)=>{
                 let result = typeof state2 === "function" ? state2(ctx) : state2;
-                return `:merge(.peer)${result} ~ &`;
+                return result.replace(/&(\S+)/, ":merge(.peer)$1 ~ &");
             });
         }
     },
@@ -239,6 +261,10 @@ let variantPlugins = {
     orientationVariants: ({ addVariant  })=>{
         addVariant("portrait", "@media (orientation: portrait)");
         addVariant("landscape", "@media (orientation: landscape)");
+    },
+    prefersContrastVariants: ({ addVariant  })=>{
+        addVariant("contrast-more", "@media (prefers-contrast: more)");
+        addVariant("contrast-less", "@media (prefers-contrast: less)");
     }
 };
 exports.variantPlugins = variantPlugins;
@@ -284,10 +310,7 @@ let corePlugins = {
     },
     container: (()=>{
         function extractMinWidths(breakpoints = []) {
-            return breakpoints.flatMap((breakpoint1)=>breakpoint1.values.map((breakpoint)=>breakpoint.min
-                )
-            ).filter((v)=>v !== undefined
-            );
+            return breakpoints.flatMap((breakpoint1)=>breakpoint1.values.map((breakpoint)=>breakpoint.min)).filter((v)=>v !== undefined);
         }
         function mapMinWidthsToPadding(minWidths, screens, paddings) {
             if (typeof paddings === "undefined") {
@@ -329,8 +352,7 @@ let corePlugins = {
             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 {};
                 }
@@ -339,16 +361,14 @@ let corePlugins = {
                     paddingLeft: paddingConfig.padding
                 };
             };
-            let atRules = Array.from(new Set(minWidths.slice().sort((a, z)=>parseInt(a) - parseInt(z)
-            ))).map((minWidth)=>({
+            let atRules = Array.from(new Set(minWidths.slice().sort((a, z)=>parseInt(a) - parseInt(z)))).map((minWidth)=>({
                     [`@media (min-width: ${minWidth})`]: {
                         ".container": {
                             "max-width": minWidth,
                             ...generatePaddingFor(minWidth)
                         }
                     }
-                })
-            );
+                }));
             addComponents([
                 {
                     ".container": Object.assign({
@@ -1025,8 +1045,7 @@ let corePlugins = {
         });
     },
     animation: ({ matchUtilities , theme , config  })=>{
-        let prefixName = (name)=>`${config("prefix")}${(0, _escapeClassName).default(name)}`
-        ;
+        let prefixName = (name)=>`${config("prefix")}${(0, _escapeClassName).default(name)}`;
         var ref;
         let keyframes = Object.fromEntries(Object.entries((ref = theme("keyframes")) !== null && ref !== void 0 ? ref : {}).map(([key, value])=>{
             return [
@@ -1040,8 +1059,7 @@ let corePlugins = {
             animate: (value1)=>{
                 let animations = (0, _parseAnimationValue).default(value1);
                 return [
-                    ...animations.flatMap((animation)=>keyframes[animation.name]
-                    ),
+                    ...animations.flatMap((animation)=>keyframes[animation.name]),
                     {
                         animation: animations.map(({ name , value  })=>{
                             if (name === undefined || keyframes[name] === undefined) {
@@ -1741,8 +1759,7 @@ let corePlugins = {
                 };
             }
         }, {
-            values: (({ DEFAULT: _ , ...colors })=>colors
-            )((0, _flattenColorPalette).default(theme("divideColor"))),
+            values: (({ DEFAULT: _ , ...colors })=>colors)((0, _flattenColorPalette).default(theme("divideColor"))),
             type: "color"
         });
     },
@@ -2144,8 +2161,7 @@ let corePlugins = {
                 });
             }
         }, {
-            values: (({ DEFAULT: _ , ...colors })=>colors
-            )((0, _flattenColorPalette).default(theme("borderColor"))),
+            values: (({ DEFAULT: _ , ...colors })=>colors)((0, _flattenColorPalette).default(theme("borderColor"))),
             type: [
                 "color"
             ]
@@ -2184,8 +2200,7 @@ let corePlugins = {
                 });
             }
         }, {
-            values: (({ DEFAULT: _ , ...colors })=>colors
-            )((0, _flattenColorPalette).default(theme("borderColor"))),
+            values: (({ DEFAULT: _ , ...colors })=>colors)((0, _flattenColorPalette).default(theme("borderColor"))),
             type: "color"
         });
         matchUtilities({
@@ -2238,8 +2253,7 @@ let corePlugins = {
                 });
             }
         }, {
-            values: (({ DEFAULT: _ , ...colors })=>colors
-            )((0, _flattenColorPalette).default(theme("borderColor"))),
+            values: (({ DEFAULT: _ , ...colors })=>colors)((0, _flattenColorPalette).default(theme("borderColor"))),
             type: "color"
         });
     },
@@ -2309,7 +2323,8 @@ let corePlugins = {
                     let transparentToValue = transparentTo(value);
                     return {
                         "--tw-gradient-from": (0, _toColorValue).default(value, "from"),
-                        "--tw-gradient-stops": `var(--tw-gradient-from), var(--tw-gradient-to, ${transparentToValue})`
+                        "--tw-gradient-to": transparentToValue,
+                        "--tw-gradient-stops": `var(--tw-gradient-from), var(--tw-gradient-to)`
                     };
                 }
             }, options);
@@ -2317,7 +2332,8 @@ let corePlugins = {
                 via: (value)=>{
                     let transparentToValue = transparentTo(value);
                     return {
-                        "--tw-gradient-stops": `var(--tw-gradient-from), ${(0, _toColorValue).default(value, "via")}, var(--tw-gradient-to, ${transparentToValue})`
+                        "--tw-gradient-to": transparentToValue,
+                        "--tw-gradient-stops": `var(--tw-gradient-from), ${(0, _toColorValue).default(value, "via")}, var(--tw-gradient-to)`
                     };
                 }
             }, options);
@@ -3194,10 +3210,18 @@ let corePlugins = {
             ]
         });
     },
-    ringWidth: ({ matchUtilities , addDefaults , addUtilities , theme  })=>{
-        var ref;
-        let ringOpacityDefault = theme("ringOpacity.DEFAULT", "0.5");
-        let ringColorDefault = (0, _withAlphaVariable).withAlphaValue((ref = theme("ringColor")) === null || ref === void 0 ? void 0 : ref.DEFAULT, ringOpacityDefault, `rgb(147 197 253 / ${ringOpacityDefault})`);
+    ringWidth: ({ matchUtilities , addDefaults , addUtilities , theme , config  })=>{
+        let ringColorDefault = (()=>{
+            var ref, ref1;
+            if ((0, _featureFlags).flagEnabled(config(), "respectDefaultRingColorOpacity")) {
+                return theme("ringColor.DEFAULT");
+            }
+            let ringOpacityDefault = theme("ringOpacity.DEFAULT", "0.5");
+            if (!((ref = theme("ringColor")) === null || ref === void 0 ? void 0 : ref.DEFAULT)) {
+                return `rgb(147 197 253 / ${ringOpacityDefault})`;
+            }
+            return (0, _withAlphaVariable).withAlphaValue((ref1 = theme("ringColor")) === null || ref1 === void 0 ? void 0 : ref1.DEFAULT, ringOpacityDefault, `rgb(147 197 253 / ${ringOpacityDefault})`);
+        })();
         addDefaults("ring-width", {
             "--tw-ring-inset": " ",
             "--tw-ring-offset-width": theme("ringOffsetWidth.DEFAULT", "0px"),
@@ -3247,21 +3271,23 @@ let corePlugins = {
                 });
             }
         }, {
-            values: Object.fromEntries(Object.entries((0, _flattenColorPalette).default(theme("ringColor"))).filter(([modifier])=>modifier !== "DEFAULT"
-            )),
+            values: Object.fromEntries(Object.entries((0, _flattenColorPalette).default(theme("ringColor"))).filter(([modifier])=>modifier !== "DEFAULT")),
             type: "color"
         });
     },
-    ringOpacity: (0, _createUtilityPlugin).default("ringOpacity", [
-        [
-            "ring-opacity",
+    ringOpacity: (helpers)=>{
+        let { config  } = helpers;
+        return (0, _createUtilityPlugin).default("ringOpacity", [
             [
-                "--tw-ring-opacity"
+                "ring-opacity",
+                [
+                    "--tw-ring-opacity"
+                ]
             ]
-        ]
-    ], {
-        filterDefault: true
-    }),
+        ], {
+            filterDefault: !(0, _featureFlags).flagEnabled(config(), "respectDefaultRingColorOpacity")
+        })(helpers);
+    },
     ringOffsetWidth: (0, _createUtilityPlugin).default("ringOffsetWidth", [
         [
             "ring-offset",
@@ -3327,8 +3353,7 @@ let corePlugins = {
         matchUtilities({
             "drop-shadow": (value)=>{
                 return {
-                    "--tw-drop-shadow": Array.isArray(value) ? value.map((v)=>`drop-shadow(${v})`
-                    ).join(" ") : `drop-shadow(${value})`,
+                    "--tw-drop-shadow": Array.isArray(value) ? value.map((v)=>`drop-shadow(${v})`).join(" ") : `drop-shadow(${value})`,
                     "@defaults filter": {},
                     filter: cssFilterValue
                 };