tailwindcss 3.3.4 → 3.3.6

package/CHANGELOG.md

@@ -9,6 +9,26 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Nothing yet!
 
+## [3.3.6] - 2023-12-04
+
+### Fixed
+
+- Don’t add spaces to negative numbers following a comma ([#12324](https://github.com/tailwindlabs/tailwindcss/pull/12324))
+- Don't emit `@config` in CSS when watching via the CLI ([#12327](https://github.com/tailwindlabs/tailwindcss/pull/12327))
+- Improve types for `resolveConfig` ([#12272](https://github.com/tailwindlabs/tailwindcss/pull/12272))
+- Ensure configured `font-feature-settings` for `mono` are included in Preflight ([#12342](https://github.com/tailwindlabs/tailwindcss/pull/12342))
+- Improve candidate detection in minified JS arrays (without spaces) ([#12396](https://github.com/tailwindlabs/tailwindcss/pull/12396))
+- Don't crash when given applying a variant to a negated version of a simple utility ([#12514](https://github.com/tailwindlabs/tailwindcss/pull/12514))
+- Fix support for slashes in arbitrary modifiers ([#12515](https://github.com/tailwindlabs/tailwindcss/pull/12515))
+- Fix source maps of variant utilities that come from an `@layer` rule ([#12508](https://github.com/tailwindlabs/tailwindcss/pull/12508))
+- Fix loading of built-in plugins when using an ESM or TypeScript config with the Standalone CLI ([#12506](https://github.com/tailwindlabs/tailwindcss/pull/12506))
+
+## [3.3.5] - 2023-10-25
+
+### Fixed
+
+- Fix incorrect spaces around `-` in `calc()` expression ([#12283](https://github.com/tailwindlabs/tailwindcss/pull/12283))
+
 ## [3.3.4] - 2023-10-24
 
 ### Fixed
@@ -2283,7 +2303,9 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.4...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.6...HEAD
+[3.3.6]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.5...v3.3.6
+[3.3.5]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.4...v3.3.5
 [3.3.4]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.3...v3.3.4
 [3.3.3]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.2...v3.3.3
 [3.3.2]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.1...v3.3.2

package/lib/cli/build/plugin.js

@@ -192,14 +192,14 @@ let state = {
         return content;
     },
     getContext ({ createContext , cliConfigPath , root , result , content  }) {
-        if (this.context) {
-            this.context.changedContent = this.changedContent.splice(0);
-            return this.context;
-        }
         _sharedState.env.DEBUG && console.time("Searching for config");
         var _findAtConfigPath1;
         let configPath = (_findAtConfigPath1 = (0, _findAtConfigPath.findAtConfigPath)(root, result)) !== null && _findAtConfigPath1 !== void 0 ? _findAtConfigPath1 : cliConfigPath;
         _sharedState.env.DEBUG && console.timeEnd("Searching for config");
+        if (this.context) {
+            this.context.changedContent = this.changedContent.splice(0);
+            return this.context;
+        }
         _sharedState.env.DEBUG && console.time("Loading config");
         let config = this.loadConfig(configPath, content);
         _sharedState.env.DEBUG && console.timeEnd("Loading config");

package/lib/css/preflight.css

@@ -99,8 +99,10 @@ strong {
 }
 
 /*
-1. Use the user's configured `mono` font family by default.
-2. Correct the odd `em` font sizing in all browsers.
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
 */
 
 code,
@@ -108,7 +110,9 @@ kbd,
 samp,
 pre {
   font-family: theme('fontFamily.mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); /* 1 */
-  font-size: 1em; /* 2 */
+  font-feature-settings: theme('fontFamily.mono[1].fontFeatureSettings', normal); /* 2 */
+  font-variation-settings: theme('fontFamily.mono[1].fontVariationSettings', normal); /* 3 */
+  font-size: 1em; /* 4 */
 }
 
 /*

package/lib/lib/defaultExtractor.js

@@ -85,7 +85,12 @@ function* buildRegExps(context) {
             _regex.optional(_regex.any([
                 _regex.pattern([
                     // Arbitrary values
-                    /-(?:\w+-)*\[[^\s:]+\]/,
+                    _regex.any([
+                        /-(?:\w+-)*\['[^\s]+'\]/,
+                        /-(?:\w+-)*\["[^\s]+"\]/,
+                        /-(?:\w+-)*\[`[^\s]+`\]/,
+                        /-(?:\w+-)*\[(?:[^\s\[\]]+\[[^\s\[\]]+\])*[^\s:\[\]]+\]/
+                    ]),
                     // Not immediately followed by an `{[(`
                     /(?![{([]])/,
                     // optionally followed by an opacity modifier
@@ -93,7 +98,12 @@ function* buildRegExps(context) {
                 ]),
                 _regex.pattern([
                     // Arbitrary values
-                    /-(?:\w+-)*\[[^\s]+\]/,
+                    _regex.any([
+                        /-(?:\w+-)*\['[^\s]+'\]/,
+                        /-(?:\w+-)*\["[^\s]+"\]/,
+                        /-(?:\w+-)*\[`[^\s]+`\]/,
+                        /-(?:\w+-)*\[(?:[^\s\[\]]+\[[^\s\[\]]+\])*[^\s\[\]]+\]/
+                    ]),
                     // Not immediately followed by an `{[(`
                     /(?![{([]])/,
                     // optionally followed by an opacity modifier

package/lib/lib/expandTailwindAtRules.js

@@ -260,6 +260,9 @@ function expandTailwindAtRules(context) {
                 layer: "variants"
             }));
         }
+        var _root_source_end;
+        // TODO: Why is the root node having no source location for `end` possible?
+        root.source.end = (_root_source_end = root.source.end) !== null && _root_source_end !== void 0 ? _root_source_end : root.source.start;
         // If we've got a utility layer and no utilities are generated there's likely something wrong
         const hasUtilityVariants = variantNodes.some((node)=>{
             var _node_raws_tailwind;

package/lib/lib/generateRules.js

@@ -813,6 +813,10 @@ function applyFinalFormat(match, { context , candidate  }) {
     if (!isValid) {
         return null;
     }
+    // If all rules have been eliminated we can skip this candidate entirely
+    if (container.nodes.length === 0) {
+        return null;
+    }
     match[1] = container.nodes[0];
     return match;
 }

package/lib/lib/load-config.js

@@ -2,9 +2,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "loadConfig", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useCustomJiti: function() {
+        return useCustomJiti;
+    },
+    loadConfig: function() {
         return loadConfig;
     }
 });
@@ -16,6 +24,9 @@ function _interop_require_default(obj) {
     };
 }
 let jiti = null;
+function useCustomJiti(_jiti) {
+    jiti = _jiti;
+}
 function lazyJiti() {
     return jiti !== null && jiti !== void 0 ? jiti : jiti = (0, _jiti.default)(__filename, {
         interopDefault: true,

package/lib/oxide/cli/build/plugin.js

@@ -191,14 +191,14 @@ let state = {
         return content;
     },
     getContext ({ createContext , cliConfigPath , root , result , content  }) {
-        if (this.context) {
-            this.context.changedContent = this.changedContent.splice(0);
-            return this.context;
-        }
         _sharedState.env.DEBUG && console.time("Searching for config");
         var _findAtConfigPath1;
         let configPath = (_findAtConfigPath1 = (0, _findAtConfigPath.findAtConfigPath)(root, result)) !== null && _findAtConfigPath1 !== void 0 ? _findAtConfigPath1 : cliConfigPath;
         _sharedState.env.DEBUG && console.timeEnd("Searching for config");
+        if (this.context) {
+            this.context.changedContent = this.changedContent.splice(0);
+            return this.context;
+        }
         _sharedState.env.DEBUG && console.time("Loading config");
         let config = this.loadConfig(configPath, content);
         _sharedState.env.DEBUG && console.timeEnd("Loading config");

package/lib/util/cloneNodes.js

@@ -1,4 +1,9 @@
-"use strict";
+/**
+ * @param {import('postcss').Container[]} nodes
+ * @param {any} source
+ * @param {any} raws
+ * @returns {import('postcss').Container[]}
+ */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
@@ -10,25 +15,40 @@ Object.defineProperty(exports, "default", {
 });
 function cloneNodes(nodes, source = undefined, raws = undefined) {
     return nodes.map((node)=>{
-        var _node_raws_tailwind;
         let cloned = node.clone();
-        // We always want override the source map
-        // except when explicitly told not to
-        let shouldOverwriteSource = ((_node_raws_tailwind = node.raws.tailwind) === null || _node_raws_tailwind === void 0 ? void 0 : _node_raws_tailwind.preserveSource) !== true || !cloned.source;
-        if (source !== undefined && shouldOverwriteSource) {
-            cloned.source = source;
-            if ("walk" in cloned) {
-                cloned.walk((child)=>{
-                    child.source = source;
-                });
-            }
-        }
         if (raws !== undefined) {
             cloned.raws.tailwind = {
                 ...cloned.raws.tailwind,
                 ...raws
             };
         }
+        if (source !== undefined) {
+            traverse(cloned, (node)=>{
+                var _node_raws_tailwind;
+                // Do not traverse nodes that have opted
+                // to preserve their original source
+                let shouldPreserveSource = ((_node_raws_tailwind = node.raws.tailwind) === null || _node_raws_tailwind === void 0 ? void 0 : _node_raws_tailwind.preserveSource) === true && node.source;
+                if (shouldPreserveSource) {
+                    return false;
+                }
+                // Otherwise we can safely replace the source
+                // And continue traversing
+                node.source = source;
+            });
+        }
         return cloned;
     });
 }
+/**
+ * Traverse a tree of nodes and don't traverse children if the callback
+ * returns false. Ideally we'd use Container#walk instead of this
+ * function but it stops traversing siblings too.
+ *
+ * @param {import('postcss').Container} node
+ * @param {(node: import('postcss').Container) => boolean} onNode
+ */ function traverse(node, onNode) {
+    if (onNode(node) !== false) {
+        var _node_each;
+        (_node_each = node.each) === null || _node_each === void 0 ? void 0 : _node_each.call(node, (child)=>traverse(child, onNode));
+    }
+}

package/lib/util/dataTypes.js

@@ -114,7 +114,7 @@ function normalize(value, context = null, isRoot = true) {
 }
 /**
  * Add spaces around operators inside math functions
- * like calc() that do not follow an operator or '('.
+ * like calc() that do not follow an operator, '(', or `,`.
  *
  * @param {string} value
  * @returns {string}
@@ -122,6 +122,26 @@ function normalize(value, context = null, isRoot = true) {
     let preventFormattingInFunctions = [
         "theme"
     ];
+    let preventFormattingKeywords = [
+        "min-content",
+        "max-content",
+        "fit-content",
+        // Env
+        "safe-area-inset-top",
+        "safe-area-inset-right",
+        "safe-area-inset-bottom",
+        "safe-area-inset-left",
+        "titlebar-area-x",
+        "titlebar-area-y",
+        "titlebar-area-width",
+        "titlebar-area-height",
+        "keyboard-inset-top",
+        "keyboard-inset-right",
+        "keyboard-inset-bottom",
+        "keyboard-inset-left",
+        "keyboard-inset-width",
+        "keyboard-inset-height"
+    ];
     return value.replace(/(calc|min|max|clamp)\(.+\)/g, (match)=>{
         let result = "";
         function lastChar() {
@@ -158,6 +178,10 @@ function normalize(value, context = null, isRoot = true) {
                     ")",
                     ","
                 ]);
+            } else if (preventFormattingKeywords.some((keyword)=>peek(keyword))) {
+                let keyword = preventFormattingKeywords.find((keyword)=>peek(keyword));
+                result += keyword;
+                i += keyword.length - 1;
             } else if (preventFormattingInFunctions.some((fn)=>peek(fn))) {
                 result += consumeUntil([
                     ")"
@@ -172,7 +196,8 @@ function normalize(value, context = null, isRoot = true) {
                 "+",
                 "-",
                 "*",
-                "/"
+                "/",
+                ","
             ].includes(lastChar())) {
                 result += ` ${char} `;
             } else {

package/lib/util/pluginUtils.js

@@ -92,6 +92,19 @@ function isArbitraryValue(input) {
 }
 function splitUtilityModifier(modifier) {
     let slashIdx = modifier.lastIndexOf("/");
+    // If the `/` is inside an arbitrary, we want to find the previous one if any
+    // This logic probably isn't perfect but it should work for most cases
+    let arbitraryStartIdx = modifier.lastIndexOf("[", slashIdx);
+    let arbitraryEndIdx = modifier.indexOf("]", slashIdx);
+    let isNextToArbitrary = modifier[slashIdx - 1] === "]" || modifier[slashIdx + 1] === "[";
+    // Backtrack to the previous `/` if the one we found was inside an arbitrary
+    if (!isNextToArbitrary) {
+        if (arbitraryStartIdx !== -1 && arbitraryEndIdx !== -1) {
+            if (arbitraryStartIdx < slashIdx && slashIdx < arbitraryEndIdx) {
+                slashIdx = modifier.lastIndexOf("/", arbitraryStartIdx);
+            }
+        }
+    }
     if (slashIdx === -1 || slashIdx === modifier.length - 1) {
         return [
             modifier,

package/package.json

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

package/resolveConfig.d.ts

@@ -1,11 +1,30 @@
-import type { Config, ResolvableTo } from './types/config'
+import { Config, ResolvableTo, ThemeConfig } from './types/config'
+import { DefaultTheme } from './types/generated/default-theme'
+import { DefaultColors } from './types/generated/colors'
+
+type ResolvedConfig<T extends Config> = Omit<T, 'theme'> & {
+  theme: MergeThemes<
+    UnwrapResolvables<Omit<T['theme'], 'extend'>>,
+    T['theme'] extends { extend: infer TExtend } ? UnwrapResolvables<TExtend> : {}
+  >
+}
 
 type UnwrapResolvables<T> = {
   [K in keyof T]: T[K] extends ResolvableTo<infer R> ? R : T[K]
 }
 
-type ResolvedConfig<T extends Config> = Omit<T, 'theme'> & {
-  theme: UnwrapResolvables<T['theme']>
+type ThemeConfigResolved = UnwrapResolvables<ThemeConfig>
+type DefaultThemeFull = DefaultTheme & { colors: DefaultColors }
+
+type MergeThemes<Overrides extends object, Extensions extends object> = {
+  [K in keyof ThemeConfigResolved | keyof Overrides]: (K extends keyof Overrides
+    ? Overrides[K]
+    : K extends keyof DefaultThemeFull
+    ? DefaultThemeFull[K]
+    : K extends keyof ThemeConfigResolved
+    ? ThemeConfigResolved[K]
+    : never) &
+    (K extends keyof Extensions ? Extensions[K] : {})
 }
 
 declare function resolveConfig<T extends Config>(config: T): ResolvedConfig<T>

package/scripts/generate-types.js

@@ -91,9 +91,8 @@ fs.writeFileSync(
   path.join(process.cwd(), 'types', 'generated', 'default-theme.d.ts'),
   prettier.format(
     `
-    import { Config } from '../../types'
     type CSSDeclarationList = Record<string, string>
-    export type DefaultTheme = Config['theme'] & { ${defaultThemeTypes} }
+    export type DefaultTheme = { ${defaultThemeTypes} }
   `,
     {
       semi: false,

package/src/cli/build/plugin.js

@@ -211,16 +211,16 @@ let state = {
   },
 
   getContext({ createContext, cliConfigPath, root, result, content }) {
+    env.DEBUG && console.time('Searching for config')
+    let configPath = findAtConfigPath(root, result) ?? cliConfigPath
+    env.DEBUG && console.timeEnd('Searching for config')
+
     if (this.context) {
       this.context.changedContent = this.changedContent.splice(0)
 
       return this.context
     }
 
-    env.DEBUG && console.time('Searching for config')
-    let configPath = findAtConfigPath(root, result) ?? cliConfigPath
-    env.DEBUG && console.timeEnd('Searching for config')
-
     env.DEBUG && console.time('Loading config')
     let config = this.loadConfig(configPath, content)
     env.DEBUG && console.timeEnd('Loading config')

package/src/css/preflight.css

@@ -99,8 +99,10 @@ strong {
 }
 
 /*
-1. Use the user's configured `mono` font family by default.
-2. Correct the odd `em` font sizing in all browsers.
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
 */
 
 code,
@@ -108,7 +110,9 @@ kbd,
 samp,
 pre {
   font-family: theme('fontFamily.mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); /* 1 */
-  font-size: 1em; /* 2 */
+  font-feature-settings: theme('fontFamily.mono[1].fontFeatureSettings', normal); /* 2 */
+  font-variation-settings: theme('fontFamily.mono[1].fontVariationSettings', normal); /* 3 */
+  font-size: 1em; /* 4 */
 }
 
 /*

package/src/featureFlags.js

@@ -19,10 +19,7 @@ let featureFlags = {
     'disableColorOpacityUtilitiesByDefault',
     'relativeContentPathsByDefault',
   ],
-  experimental: [
-    'optimizeUniversalDefaults',
-    'generalizedModifiers',
-  ],
+  experimental: ['optimizeUniversalDefaults', 'generalizedModifiers'],
 }
 
 export function flagEnabled(config, flag) {

package/src/lib/defaultExtractor.js

@@ -1,4 +1,3 @@
-import { flagEnabled } from '../featureFlags'
 import * as regex from './regex'
 
 export function defaultExtractor(context) {
@@ -48,7 +47,12 @@ function* buildRegExps(context) {
         regex.any([
           regex.pattern([
             // Arbitrary values
-            /-(?:\w+-)*\[[^\s:]+\]/,
+            regex.any([
+              /-(?:\w+-)*\['[^\s]+'\]/,
+              /-(?:\w+-)*\["[^\s]+"\]/,
+              /-(?:\w+-)*\[`[^\s]+`\]/,
+              /-(?:\w+-)*\[(?:[^\s\[\]]+\[[^\s\[\]]+\])*[^\s:\[\]]+\]/,
+            ]),
 
             // Not immediately followed by an `{[(`
             /(?![{([]])/,
@@ -59,7 +63,12 @@ function* buildRegExps(context) {
 
           regex.pattern([
             // Arbitrary values
-            /-(?:\w+-)*\[[^\s]+\]/,
+            regex.any([
+              /-(?:\w+-)*\['[^\s]+'\]/,
+              /-(?:\w+-)*\["[^\s]+"\]/,
+              /-(?:\w+-)*\[`[^\s]+`\]/,
+              /-(?:\w+-)*\[(?:[^\s\[\]]+\[[^\s\[\]]+\])*[^\s\[\]]+\]/,
+            ]),
 
             // Not immediately followed by an `{[(`
             /(?![{([]])/,

package/src/lib/expandTailwindAtRules.js

@@ -265,6 +265,9 @@ export default function expandTailwindAtRules(context) {
       )
     }
 
+    // TODO: Why is the root node having no source location for `end` possible?
+    root.source.end = root.source.end ?? root.source.start
+
     // If we've got a utility layer and no utilities are generated there's likely something wrong
     const hasUtilityVariants = variantNodes.some(
       (node) => node.raws.tailwind?.parentLayer === 'utilities'

package/src/lib/generateRules.js

@@ -845,6 +845,11 @@ function applyFinalFormat(match, { context, candidate }) {
     return null
   }
 
+  // If all rules have been eliminated we can skip this candidate entirely
+  if (container.nodes.length === 0) {
+    return null
+  }
+
   match[1] = container.nodes[0]
 
   return match

package/src/lib/load-config.ts

@@ -4,6 +4,14 @@ import { transform } from 'sucrase'
 import { Config } from '../../types/config'
 
 let jiti: ReturnType<typeof jitiFactory> | null = null
+
+// @internal
+// This WILL be removed in some future release
+// If you rely on this your stuff WILL break
+export function useCustomJiti(_jiti: ReturnType<typeof jitiFactory>) {
+  jiti = _jiti
+}
+
 function lazyJiti() {
   return (
     jiti ??

package/src/oxide/cli/build/plugin.ts

@@ -210,16 +210,16 @@ let state = {
   },
 
   getContext({ createContext, cliConfigPath, root, result, content }) {
+    env.DEBUG && console.time('Searching for config')
+    let configPath = findAtConfigPath(root, result) ?? cliConfigPath
+    env.DEBUG && console.timeEnd('Searching for config')
+
     if (this.context) {
       this.context.changedContent = this.changedContent.splice(0)
 
       return this.context
     }
 
-    env.DEBUG && console.time('Searching for config')
-    let configPath = findAtConfigPath(root, result) ?? cliConfigPath
-    env.DEBUG && console.timeEnd('Searching for config')
-
     env.DEBUG && console.time('Loading config')
     let config = this.loadConfig(configPath, content)
     env.DEBUG && console.timeEnd('Loading config')

package/src/util/cloneNodes.js

@@ -1,21 +1,13 @@
+/**
+ * @param {import('postcss').Container[]} nodes
+ * @param {any} source
+ * @param {any} raws
+ * @returns {import('postcss').Container[]}
+ */
 export default function cloneNodes(nodes, source = undefined, raws = undefined) {
   return nodes.map((node) => {
     let cloned = node.clone()
 
-    // We always want override the source map
-    // except when explicitly told not to
-    let shouldOverwriteSource = node.raws.tailwind?.preserveSource !== true || !cloned.source
-
-    if (source !== undefined && shouldOverwriteSource) {
-      cloned.source = source
-
-      if ('walk' in cloned) {
-        cloned.walk((child) => {
-          child.source = source
-        })
-      }
-    }
-
     if (raws !== undefined) {
       cloned.raws.tailwind = {
         ...cloned.raws.tailwind,
@@ -23,6 +15,35 @@ export default function cloneNodes(nodes, source = undefined, raws = undefined)
       }
     }
 
+    if (source !== undefined) {
+      traverse(cloned, (node) => {
+        // Do not traverse nodes that have opted
+        // to preserve their original source
+        let shouldPreserveSource = node.raws.tailwind?.preserveSource === true && node.source
+        if (shouldPreserveSource) {
+          return false
+        }
+
+        // Otherwise we can safely replace the source
+        // And continue traversing
+        node.source = source
+      })
+    }
+
     return cloned
   })
 }
+
+/**
+ * Traverse a tree of nodes and don't traverse children if the callback
+ * returns false. Ideally we'd use Container#walk instead of this
+ * function but it stops traversing siblings too.
+ *
+ * @param {import('postcss').Container} node
+ * @param {(node: import('postcss').Container) => boolean} onNode
+ */
+function traverse(node, onNode) {
+  if (onNode(node) !== false) {
+    node.each?.((child) => traverse(child, onNode))
+  }
+}

package/src/util/dataTypes.js

@@ -77,13 +77,36 @@ export function normalize(value, context = null, isRoot = true) {
 
 /**
  * Add spaces around operators inside math functions
- * like calc() that do not follow an operator or '('.
+ * like calc() that do not follow an operator, '(', or `,`.
  *
  * @param {string} value
  * @returns {string}
  */
 function normalizeMathOperatorSpacing(value) {
   let preventFormattingInFunctions = ['theme']
+  let preventFormattingKeywords = [
+    'min-content',
+    'max-content',
+    'fit-content',
+
+    // Env
+    'safe-area-inset-top',
+    'safe-area-inset-right',
+    'safe-area-inset-bottom',
+    'safe-area-inset-left',
+
+    'titlebar-area-x',
+    'titlebar-area-y',
+    'titlebar-area-width',
+    'titlebar-area-height',
+
+    'keyboard-inset-top',
+    'keyboard-inset-right',
+    'keyboard-inset-bottom',
+    'keyboard-inset-left',
+    'keyboard-inset-width',
+    'keyboard-inset-height',
+  ]
 
   return value.replace(/(calc|min|max|clamp)\(.+\)/g, (match) => {
     let result = ''
@@ -126,6 +149,13 @@ function normalizeMathOperatorSpacing(value) {
         result += consumeUntil([')', ','])
       }
 
+      // Skip formatting of known keywords
+      else if (preventFormattingKeywords.some((keyword) => peek(keyword))) {
+        let keyword = preventFormattingKeywords.find((keyword) => peek(keyword))
+        result += keyword
+        i += keyword.length - 1
+      }
+
       // Skip formatting inside known functions
       else if (preventFormattingInFunctions.some((fn) => peek(fn))) {
         result += consumeUntil([')'])
@@ -134,7 +164,7 @@ function normalizeMathOperatorSpacing(value) {
       // Handle operators
       else if (
         ['+', '-', '*', '/'].includes(char) &&
-        !['(', '+', '-', '*', '/'].includes(lastChar())
+        !['(', '+', '-', '*', '/', ','].includes(lastChar())
       ) {
         result += ` ${char} `
       } else {

package/src/util/pluginUtils.js

@@ -88,6 +88,22 @@ function isArbitraryValue(input) {
 function splitUtilityModifier(modifier) {
   let slashIdx = modifier.lastIndexOf('/')
 
+  // If the `/` is inside an arbitrary, we want to find the previous one if any
+  // This logic probably isn't perfect but it should work for most cases
+  let arbitraryStartIdx = modifier.lastIndexOf('[', slashIdx)
+  let arbitraryEndIdx = modifier.indexOf(']', slashIdx)
+
+  let isNextToArbitrary = modifier[slashIdx - 1] === ']' || modifier[slashIdx + 1] === '['
+
+  // Backtrack to the previous `/` if the one we found was inside an arbitrary
+  if (!isNextToArbitrary) {
+    if (arbitraryStartIdx !== -1 && arbitraryEndIdx !== -1) {
+      if (arbitraryStartIdx < slashIdx && slashIdx < arbitraryEndIdx) {
+        slashIdx = modifier.lastIndexOf('/', arbitraryStartIdx)
+      }
+    }
+  }
+
   if (slashIdx === -1 || slashIdx === modifier.length - 1) {
     return [modifier, undefined]
   }

package/types/config.d.ts

@@ -79,7 +79,7 @@ type Screen = { raw: string } | { min: string } | { max: string } | { min: strin
 type ScreensConfig = string[] | KeyValuePair<string, string | Screen | Screen[]>
 
 // Theme related config
-interface ThemeConfig {
+export interface ThemeConfig {
   // Responsiveness
   screens: ResolvableTo<ScreensConfig>
   supports: ResolvableTo<Record<string, string>>
@@ -234,8 +234,9 @@ interface ThemeConfig {
   transitionDuration: ResolvableTo<KeyValuePair>
   willChange: ResolvableTo<KeyValuePair>
   content: ResolvableTo<KeyValuePair>
+}
 
-  // Custom
+interface CustomThemeConfig extends ThemeConfig {
   [key: string]: any
 }
 
@@ -358,7 +359,7 @@ interface OptionalConfig {
   future: Partial<FutureConfig>
   experimental: Partial<ExperimentalConfig>
   darkMode: Partial<DarkModeConfig>
-  theme: Partial<ThemeConfig & { extend: Partial<ThemeConfig> }>
+  theme: Partial<CustomThemeConfig & { extend: Partial<CustomThemeConfig> }>
   corePlugins: Partial<CorePluginsConfig>
   plugins: Partial<PluginsConfig>
   // Custom

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

@@ -1,6 +1,5 @@
-import { Config } from '../../types'
 type CSSDeclarationList = Record<string, string>
-export type DefaultTheme = Config['theme'] & {
+export type DefaultTheme = {
   animation: Record<'none' | 'spin' | 'ping' | 'pulse' | 'bounce', string>
   aria: Record<
     | 'busy'