tailwindcss 0.0.0-insiders.afd159d → 0.0.0-insiders.aff715e

package/lib/corePlugins.js

@@ -15,7 +15,6 @@ _export(exports, {
 const _fs = /*#__PURE__*/ _interopRequireDefault(require("fs"));
 const _path = /*#__PURE__*/ _interopRequireWildcard(require("path"));
 const _postcss = /*#__PURE__*/ _interopRequireDefault(require("postcss"));
-const _sharedState = require("./lib/sharedState");
 const _createUtilityPlugin = /*#__PURE__*/ _interopRequireDefault(require("./util/createUtilityPlugin"));
 const _buildMediaQuery = /*#__PURE__*/ _interopRequireDefault(require("./util/buildMediaQuery"));
 const _escapeClassName = /*#__PURE__*/ _interopRequireDefault(require("./util/escapeClassName"));
@@ -669,18 +668,6 @@ let corePlugins = {
             ]
         ],
         [
-            [
-                "start",
-                [
-                    "inset-inline-start"
-                ]
-            ],
-            [
-                "end",
-                [
-                    "inset-inline-end"
-                ]
-            ],
             [
                 "top",
                 [
@@ -833,18 +820,6 @@ let corePlugins = {
             ]
         ],
         [
-            [
-                "ms",
-                [
-                    "margin-inline-start"
-                ]
-            ],
-            [
-                "me",
-                [
-                    "margin-inline-end"
-                ]
-            ],
             [
                 "mt",
                 [
@@ -1459,18 +1434,6 @@ let corePlugins = {
             ]
         ],
         [
-            [
-                "scroll-ms",
-                [
-                    "scroll-margin-inline-start"
-                ]
-            ],
-            [
-                "scroll-me",
-                [
-                    "scroll-margin-inline-end"
-                ]
-            ],
             [
                 "scroll-mt",
                 [
@@ -1523,18 +1486,6 @@ let corePlugins = {
             ]
         ],
         [
-            [
-                "scroll-ps",
-                [
-                    "scroll-padding-inline-start"
-                ]
-            ],
-            [
-                "scroll-pe",
-                [
-                    "scroll-padding-inline-end"
-                ]
-            ],
             [
                 "scroll-pt",
                 [
@@ -1901,15 +1852,6 @@ let corePlugins = {
         matchUtilities({
             "space-x": (value)=>{
                 value = value === "0" ? "0px" : value;
-                if (_sharedState.env.OXIDE) {
-                    return {
-                        "& > :not([hidden]) ~ :not([hidden])": {
-                            "--tw-space-x-reverse": "0",
-                            "margin-inline-end": `calc(${value} * var(--tw-space-x-reverse))`,
-                            "margin-inline-start": `calc(${value} * calc(1 - var(--tw-space-x-reverse)))`
-                        }
-                    };
-                }
                 return {
                     "& > :not([hidden]) ~ :not([hidden])": {
                         "--tw-space-x-reverse": "0",
@@ -1945,16 +1887,6 @@ let corePlugins = {
         matchUtilities({
             "divide-x": (value)=>{
                 value = value === "0" ? "0px" : value;
-                if (_sharedState.env.OXIDE) {
-                    return {
-                        "& > :not([hidden]) ~ :not([hidden])": {
-                            "@defaults border-width": {},
-                            "--tw-divide-x-reverse": "0",
-                            "border-inline-end-width": `calc(${value} * var(--tw-divide-x-reverse))`,
-                            "border-inline-start-width": `calc(${value} * calc(1 - var(--tw-divide-x-reverse)))`
-                        }
-                    };
-                }
                 return {
                     "& > :not([hidden]) ~ :not([hidden])": {
                         "@defaults border-width": {},
@@ -2264,20 +2196,6 @@ let corePlugins = {
             ]
         ],
         [
-            [
-                "rounded-s",
-                [
-                    "border-start-start-radius",
-                    "border-end-start-radius"
-                ]
-            ],
-            [
-                "rounded-e",
-                [
-                    "border-start-end-radius",
-                    "border-end-end-radius"
-                ]
-            ],
             [
                 "rounded-t",
                 [
@@ -2308,30 +2226,6 @@ let corePlugins = {
             ]
         ],
         [
-            [
-                "rounded-ss",
-                [
-                    "border-start-start-radius"
-                ]
-            ],
-            [
-                "rounded-se",
-                [
-                    "border-start-end-radius"
-                ]
-            ],
-            [
-                "rounded-ee",
-                [
-                    "border-end-end-radius"
-                ]
-            ],
-            [
-                "rounded-es",
-                [
-                    "border-end-start-radius"
-                ]
-            ],
             [
                 "rounded-tl",
                 [
@@ -2394,26 +2288,6 @@ let corePlugins = {
             ]
         ],
         [
-            [
-                "border-s",
-                [
-                    [
-                        "@defaults border-width",
-                        {}
-                    ],
-                    "border-inline-start-width"
-                ]
-            ],
-            [
-                "border-e",
-                [
-                    [
-                        "@defaults border-width",
-                        {}
-                    ],
-                    "border-inline-end-width"
-                ]
-            ],
             [
                 "border-t",
                 [
@@ -2545,30 +2419,6 @@ let corePlugins = {
             ]
         });
         matchUtilities({
-            "border-s": (value)=>{
-                if (!corePlugins("borderOpacity")) {
-                    return {
-                        "border-inline-start-color": (0, _toColorValue.default)(value)
-                    };
-                }
-                return (0, _withAlphaVariable.default)({
-                    color: value,
-                    property: "border-inline-start-color",
-                    variable: "--tw-border-opacity"
-                });
-            },
-            "border-e": (value)=>{
-                if (!corePlugins("borderOpacity")) {
-                    return {
-                        "border-inline-end-color": (0, _toColorValue.default)(value)
-                    };
-                }
-                return (0, _withAlphaVariable.default)({
-                    color: value,
-                    property: "border-inline-end-color",
-                    variable: "--tw-border-opacity"
-                });
-            },
             "border-t": (value)=>{
                 if (!corePlugins("borderOpacity")) {
                     return {
@@ -2924,18 +2774,6 @@ let corePlugins = {
             ]
         ],
         [
-            [
-                "ps",
-                [
-                    "padding-inline-start"
-                ]
-            ],
-            [
-                "pe",
-                [
-                    "padding-inline-end"
-                ]
-            ],
             [
                 "pt",
                 [
@@ -3052,16 +2890,10 @@ let corePlugins = {
     },
     fontSize: ({ matchUtilities , theme  })=>{
         matchUtilities({
-            text: (value, { modifier  })=>{
+            text: (value)=>{
                 let [fontSize, options] = Array.isArray(value) ? value : [
                     value
                 ];
-                if (modifier) {
-                    return {
-                        "font-size": fontSize,
-                        "line-height": modifier
-                    };
-                }
                 let { lineHeight , letterSpacing , fontWeight  } = (0, _isPlainObject.default)(options) ? options : {
                     lineHeight: options
                 };
@@ -3080,7 +2912,6 @@ let corePlugins = {
             }
         }, {
             values: theme("fontSize"),
-            modifiers: theme("lineHeight"),
             type: [
                 "absolute-size",
                 "relative-size",

package/lib/lib/offsets.js

@@ -167,6 +167,11 @@ class Offsets {
         if (a.layer !== b.layer) {
             return this.layerPositions[a.layer] - this.layerPositions[b.layer];
         }
+        // When sorting the `variants` layer, we need to sort based on the parent layer as well within
+        // this variants layer.
+        if (a.parentLayer !== b.parentLayer) {
+            return this.layerPositions[a.parentLayer] - this.layerPositions[b.parentLayer];
+        }
         // Sort based on the sorting function
         for (let aOptions of a.options){
             for (let bOptions of b.options){

package/lib/util/color.js

@@ -24,8 +24,8 @@ let VALUE = /(?:\d+|\d*\.\d+)%?/;
 let SEP = /(?:\s*,\s*|\s+)/;
 let ALPHA_SEP = /\s*[,/]\s*/;
 let CUSTOM_PROPERTY = /var\(--(?:[^ )]*?)\)/;
-let RGB = new RegExp(`^(rgb)a?\\(\\s*(${VALUE.source}|${CUSTOM_PROPERTY.source})(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${ALPHA_SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?\\s*\\)$`);
-let HSL = new RegExp(`^(hsl)a?\\(\\s*((?:${VALUE.source})(?:deg|rad|grad|turn)?|${CUSTOM_PROPERTY.source})(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${ALPHA_SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?\\s*\\)$`);
+let RGB = new RegExp(`^(rgba?)\\(\\s*(${VALUE.source}|${CUSTOM_PROPERTY.source})(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${ALPHA_SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?\\s*\\)$`);
+let HSL = new RegExp(`^(hsla?)\\(\\s*((?:${VALUE.source})(?:deg|rad|grad|turn)?|${CUSTOM_PROPERTY.source})(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${ALPHA_SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?\\s*\\)$`);
 function parseColor(value, { loose =false  } = {}) {
     var _match_, _match__toString;
     if (typeof value !== "string") {
@@ -80,6 +80,17 @@ function parseColor(value, { loose =false  } = {}) {
         match[3],
         match[4]
     ].filter(Boolean).map((v)=>v.toString());
+    // rgba(var(--my-color), 0.1)
+    // hsla(var(--my-color), 0.1)
+    if (color.length === 2 && color[0].startsWith("var(")) {
+        return {
+            mode: match[1],
+            color: [
+                color[0]
+            ],
+            alpha: color[1]
+        };
+    }
     if (!loose && color.length !== 3) {
         return null;
     }
@@ -94,5 +105,8 @@ function parseColor(value, { loose =false  } = {}) {
 }
 function formatColor({ mode , color , alpha  }) {
     let hasAlpha = alpha !== undefined;
+    if (mode === "rgba" || mode === "hsla") {
+        return `${mode}(${color.join(", ")}${hasAlpha ? `, ${alpha}` : ""})`;
+    }
     return `${mode}(${color.join(" ")}${hasAlpha ? ` / ${alpha}` : ""})`;
 }

package/lib/util/dataTypes.js

@@ -41,9 +41,6 @@ function isCSSFunction(value) {
 const placeholder = "--tw-placeholder";
 const placeholderRe = new RegExp(placeholder, "g");
 function normalize(value, isRoot = true) {
-    if (value.startsWith("--")) {
-        return `var(${value})`;
-    }
     // Keep raw strings if it starts with `url(`
     if (value.includes("url(")) {
         return value.split(/(url\(.*?\))/g).filter(Boolean).map((part)=>{

package/lib/util/pluginUtils.js

@@ -123,13 +123,6 @@ function parseColorFormat(value) {
     }
     return value;
 }
-function unwrapArbitraryModifier(modifier) {
-    modifier = modifier.slice(1, -1);
-    if (modifier.startsWith("--")) {
-        modifier = `var(${modifier})`;
-    }
-    return modifier;
-}
 function asColor(modifier, options = {}, { tailwindConfig ={}  } = {}) {
     var _options_values;
     if (((_options_values = options.values) === null || _options_values === void 0 ? void 0 : _options_values[modifier]) !== undefined) {
@@ -148,7 +141,7 @@ function asColor(modifier, options = {}, { tailwindConfig ={}  } = {}) {
         }
         normalizedColor = parseColorFormat(normalizedColor);
         if (isArbitraryValue(alpha)) {
-            return (0, _withAlphaVariable.withAlphaValue)(normalizedColor, unwrapArbitraryModifier(alpha));
+            return (0, _withAlphaVariable.withAlphaValue)(normalizedColor, alpha.slice(1, -1));
         }
         if (((_tailwindConfig_theme = tailwindConfig.theme) === null || _tailwindConfig_theme === void 0 ? void 0 : (_tailwindConfig_theme_opacity = _tailwindConfig_theme.opacity) === null || _tailwindConfig_theme_opacity === void 0 ? void 0 : _tailwindConfig_theme_opacity[alpha]) === undefined) {
             return undefined;
@@ -263,7 +256,7 @@ function* getMatchingTypes(types, rawModifier, options, tailwindConfig) {
             if (configValue !== null) {
                 utilityModifier = configValue;
             } else if (isArbitraryValue(utilityModifier)) {
-                utilityModifier = unwrapArbitraryModifier(utilityModifier);
+                utilityModifier = utilityModifier.slice(1, -1);
             }
         }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "0.0.0-insiders.afd159d",
+  "version": "0.0.0-insiders.aff715e",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",

package/src/corePlugins.js

@@ -1,7 +1,6 @@
 import fs from 'fs'
 import * as path from 'path'
 import postcss from 'postcss'
-import { env } from './lib/sharedState'
 import createUtilityPlugin from './util/createUtilityPlugin'
 import buildMediaQuery from './util/buildMediaQuery'
 import escapeClassName from './util/escapeClassName'
@@ -647,8 +646,6 @@ export let corePlugins = {
         ['inset-y', ['top', 'bottom']],
       ],
       [
-        ['start', ['inset-inline-start']],
-        ['end', ['inset-inline-end']],
         ['top', ['top']],
         ['right', ['right']],
         ['bottom', ['bottom']],
@@ -700,8 +697,6 @@ export let corePlugins = {
         ['my', ['margin-top', 'margin-bottom']],
       ],
       [
-        ['ms', ['margin-inline-start']],
-        ['me', ['margin-inline-end']],
         ['mt', ['margin-top']],
         ['mr', ['margin-right']],
         ['mb', ['margin-bottom']],
@@ -1050,8 +1045,6 @@ export let corePlugins = {
         ['scroll-my', ['scroll-margin-top', 'scroll-margin-bottom']],
       ],
       [
-        ['scroll-ms', ['scroll-margin-inline-start']],
-        ['scroll-me', ['scroll-margin-inline-end']],
         ['scroll-mt', ['scroll-margin-top']],
         ['scroll-mr', ['scroll-margin-right']],
         ['scroll-mb', ['scroll-margin-bottom']],
@@ -1068,8 +1061,6 @@ export let corePlugins = {
       ['scroll-py', ['scroll-padding-top', 'scroll-padding-bottom']],
     ],
     [
-      ['scroll-ps', ['scroll-padding-inline-start']],
-      ['scroll-pe', ['scroll-padding-inline-end']],
       ['scroll-pt', ['scroll-padding-top']],
       ['scroll-pr', ['scroll-padding-right']],
       ['scroll-pb', ['scroll-padding-bottom']],
@@ -1243,16 +1234,6 @@ export let corePlugins = {
         'space-x': (value) => {
           value = value === '0' ? '0px' : value
 
-          if (env.OXIDE) {
-            return {
-              '& > :not([hidden]) ~ :not([hidden])': {
-                '--tw-space-x-reverse': '0',
-                'margin-inline-end': `calc(${value} * var(--tw-space-x-reverse))`,
-                'margin-inline-start': `calc(${value} * calc(1 - var(--tw-space-x-reverse)))`,
-              },
-            }
-          }
-
           return {
             '& > :not([hidden]) ~ :not([hidden])': {
               '--tw-space-x-reverse': '0',
@@ -1288,17 +1269,6 @@ export let corePlugins = {
         'divide-x': (value) => {
           value = value === '0' ? '0px' : value
 
-          if (env.OXIDE) {
-            return {
-              '& > :not([hidden]) ~ :not([hidden])': {
-                '@defaults border-width': {},
-                '--tw-divide-x-reverse': '0',
-                'border-inline-end-width': `calc(${value} * var(--tw-divide-x-reverse))`,
-                'border-inline-start-width': `calc(${value} * calc(1 - var(--tw-divide-x-reverse)))`,
-              },
-            }
-          }
-
           return {
             '& > :not([hidden]) ~ :not([hidden])': {
               '@defaults border-width': {},
@@ -1488,18 +1458,12 @@ export let corePlugins = {
   borderRadius: createUtilityPlugin('borderRadius', [
     ['rounded', ['border-radius']],
     [
-      ['rounded-s', ['border-start-start-radius', 'border-end-start-radius']],
-      ['rounded-e', ['border-start-end-radius', 'border-end-end-radius']],
       ['rounded-t', ['border-top-left-radius', 'border-top-right-radius']],
       ['rounded-r', ['border-top-right-radius', 'border-bottom-right-radius']],
       ['rounded-b', ['border-bottom-right-radius', 'border-bottom-left-radius']],
       ['rounded-l', ['border-top-left-radius', 'border-bottom-left-radius']],
     ],
     [
-      ['rounded-ss', ['border-start-start-radius']],
-      ['rounded-se', ['border-start-end-radius']],
-      ['rounded-ee', ['border-end-end-radius']],
-      ['rounded-es', ['border-end-start-radius']],
       ['rounded-tl', ['border-top-left-radius']],
       ['rounded-tr', ['border-top-right-radius']],
       ['rounded-br', ['border-bottom-right-radius']],
@@ -1516,8 +1480,6 @@ export let corePlugins = {
         ['border-y', [['@defaults border-width', {}], 'border-top-width', 'border-bottom-width']],
       ],
       [
-        ['border-s', [['@defaults border-width', {}], 'border-inline-start-width']],
-        ['border-e', [['@defaults border-width', {}], 'border-inline-end-width']],
         ['border-t', [['@defaults border-width', {}], 'border-top-width']],
         ['border-r', [['@defaults border-width', {}], 'border-right-width']],
         ['border-b', [['@defaults border-width', {}], 'border-bottom-width']],
@@ -1600,32 +1562,6 @@ export let corePlugins = {
 
     matchUtilities(
       {
-        'border-s': (value) => {
-          if (!corePlugins('borderOpacity')) {
-            return {
-              'border-inline-start-color': toColorValue(value),
-            }
-          }
-
-          return withAlphaVariable({
-            color: value,
-            property: 'border-inline-start-color',
-            variable: '--tw-border-opacity',
-          })
-        },
-        'border-e': (value) => {
-          if (!corePlugins('borderOpacity')) {
-            return {
-              'border-inline-end-color': toColorValue(value),
-            }
-          }
-
-          return withAlphaVariable({
-            color: value,
-            property: 'border-inline-end-color',
-            variable: '--tw-border-opacity',
-          })
-        },
         'border-t': (value) => {
           if (!corePlugins('borderOpacity')) {
             return {
@@ -1862,8 +1798,6 @@ export let corePlugins = {
       ['py', ['padding-top', 'padding-bottom']],
     ],
     [
-      ['ps', ['padding-inline-start']],
-      ['pe', ['padding-inline-end']],
       ['pt', ['padding-top']],
       ['pr', ['padding-right']],
       ['pb', ['padding-bottom']],
@@ -1927,16 +1861,9 @@ export let corePlugins = {
   fontSize: ({ matchUtilities, theme }) => {
     matchUtilities(
       {
-        text: (value, { modifier }) => {
+        text: (value) => {
           let [fontSize, options] = Array.isArray(value) ? value : [value]
 
-          if (modifier) {
-            return {
-              'font-size': fontSize,
-              'line-height': modifier,
-            }
-          }
-
           let { lineHeight, letterSpacing, fontWeight } = isPlainObject(options)
             ? options
             : { lineHeight: options }
@@ -1951,7 +1878,6 @@ export let corePlugins = {
       },
       {
         values: theme('fontSize'),
-        modifiers: theme('lineHeight'),
         type: ['absolute-size', 'relative-size', 'length', 'percentage'],
       }
     )

package/src/lib/offsets.js

@@ -209,6 +209,12 @@ export class Offsets {
       return this.layerPositions[a.layer] - this.layerPositions[b.layer]
     }
 
+    // When sorting the `variants` layer, we need to sort based on the parent layer as well within
+    // this variants layer.
+    if (a.parentLayer !== b.parentLayer) {
+      return this.layerPositions[a.parentLayer] - this.layerPositions[b.parentLayer]
+    }
+
     // Sort based on the sorting function
     for (let aOptions of a.options) {
       for (let bOptions of b.options) {

package/src/util/color.js

@@ -8,10 +8,10 @@ let ALPHA_SEP = /\s*[,/]\s*/
 let CUSTOM_PROPERTY = /var\(--(?:[^ )]*?)\)/
 
 let RGB = new RegExp(
-  `^(rgb)a?\\(\\s*(${VALUE.source}|${CUSTOM_PROPERTY.source})(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${ALPHA_SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?\\s*\\)$`
+  `^(rgba?)\\(\\s*(${VALUE.source}|${CUSTOM_PROPERTY.source})(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${ALPHA_SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?\\s*\\)$`
 )
 let HSL = new RegExp(
-  `^(hsl)a?\\(\\s*((?:${VALUE.source})(?:deg|rad|grad|turn)?|${CUSTOM_PROPERTY.source})(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${ALPHA_SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?\\s*\\)$`
+  `^(hsla?)\\(\\s*((?:${VALUE.source})(?:deg|rad|grad|turn)?|${CUSTOM_PROPERTY.source})(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?(?:${ALPHA_SEP.source}(${VALUE.source}|${CUSTOM_PROPERTY.source}))?\\s*\\)$`
 )
 
 // In "loose" mode the color may contain fewer than 3 parts, as long as at least
@@ -52,6 +52,16 @@ export function parseColor(value, { loose = false } = {}) {
 
   let color = [match[2], match[3], match[4]].filter(Boolean).map((v) => v.toString())
 
+  // rgba(var(--my-color), 0.1)
+  // hsla(var(--my-color), 0.1)
+  if (color.length === 2 && color[0].startsWith('var(')) {
+    return {
+      mode: match[1],
+      color: [color[0]],
+      alpha: color[1],
+    }
+  }
+
   if (!loose && color.length !== 3) {
     return null
   }
@@ -69,5 +79,10 @@ export function parseColor(value, { loose = false } = {}) {
 
 export function formatColor({ mode, color, alpha }) {
   let hasAlpha = alpha !== undefined
+
+  if (mode === 'rgba' || mode === 'hsla') {
+    return `${mode}(${color.join(', ')}${hasAlpha ? `, ${alpha}` : ''})`
+  }
+
   return `${mode}(${color.join(' ')}${hasAlpha ? ` / ${alpha}` : ''})`
 }

package/src/util/dataTypes.js

@@ -16,10 +16,6 @@ const placeholderRe = new RegExp(placeholder, 'g')
 // This is not a data type, but rather a function that can normalize the
 // correct values.
 export function normalize(value, isRoot = true) {
-  if (value.startsWith('--')) {
-    return `var(${value})`
-  }
-
   // Keep raw strings if it starts with `url(`
   if (value.includes('url(')) {
     return value

package/src/util/pluginUtils.js

@@ -133,14 +133,6 @@ export function parseColorFormat(value) {
   return value
 }
 
-function unwrapArbitraryModifier(modifier) {
-  modifier = modifier.slice(1, -1)
-  if (modifier.startsWith('--')) {
-    modifier = `var(${modifier})`
-  }
-  return modifier
-}
-
 export function asColor(modifier, options = {}, { tailwindConfig = {} } = {}) {
   if (options.values?.[modifier] !== undefined) {
     return parseColorFormat(options.values?.[modifier])
@@ -161,7 +153,7 @@ export function asColor(modifier, options = {}, { tailwindConfig = {} } = {}) {
     normalizedColor = parseColorFormat(normalizedColor)
 
     if (isArbitraryValue(alpha)) {
-      return withAlphaValue(normalizedColor, unwrapArbitraryModifier(alpha))
+      return withAlphaValue(normalizedColor, alpha.slice(1, -1))
     }
 
     if (tailwindConfig.theme?.opacity?.[alpha] === undefined) {
@@ -295,7 +287,7 @@ export function* getMatchingTypes(types, rawModifier, options, tailwindConfig) {
       if (configValue !== null) {
         utilityModifier = configValue
       } else if (isArbitraryValue(utilityModifier)) {
-        utilityModifier = unwrapArbitraryModifier(utilityModifier)
+        utilityModifier = utilityModifier.slice(1, -1)
       }
     }
   }

package/stubs/defaultConfig.stub.js

@@ -584,6 +584,7 @@ module.exports = {
     }),
     maxHeight: ({ theme }) => ({
       ...theme('spacing'),
+      none: 'none',
       full: '100%',
       screen: '100vh',
       min: 'min-content',
@@ -852,7 +853,6 @@ module.exports = {
       'top-left': 'top left',
     },
     transitionDelay: {
-      0: '0s',
       75: '75ms',
       100: '100ms',
       150: '150ms',
@@ -864,7 +864,6 @@ module.exports = {
     },
     transitionDuration: {
       DEFAULT: '150ms',
-      0: '0s',
       75: '75ms',
       100: '100ms',
       150: '150ms',

package/types/generated/default-theme.d.ts

@@ -327,12 +327,9 @@ export type DefaultTheme = Config['theme'] & {
     | 'top-left',
     string
   >
-  transitionDelay: Record<
-    '0' | '75' | '100' | '150' | '200' | '300' | '500' | '700' | '1000',
-    string
-  >
+  transitionDelay: Record<'75' | '100' | '150' | '200' | '300' | '500' | '700' | '1000', string>
   transitionDuration: Record<
-    '0' | '75' | '100' | '150' | '200' | '300' | '500' | '700' | '1000' | 'DEFAULT',
+    '75' | '100' | '150' | '200' | '300' | '500' | '700' | '1000' | 'DEFAULT',
     string
   >
   transitionProperty: Record<