tailwindcss 3.3.7 → 3.4.1

package/CHANGELOG.md

@@ -9,6 +9,47 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Nothing yet!
 
+## [3.4.1] - 2014-01-05
+
+### Fixed
+
+- Don't remove keyframe stops when using important utilities ([#12639](https://github.com/tailwindlabs/tailwindcss/pull/12639))
+- Don't add spaces to gradients and grid track names when followed by `calc()` ([#12704](https://github.com/tailwindlabs/tailwindcss/pull/12704))
+- Restore old behavior for `class` dark mode strategy ([#12717](https://github.com/tailwindlabs/tailwindcss/pull/12717))
+
+### Added
+
+- Add new `selector` and `variant` strategies for dark mode ([#12717](https://github.com/tailwindlabs/tailwindcss/pull/12717))
+
+### Changed
+
+- Support `rtl` and `ltr` variants on same element as `dir` attribute ([#12717](https://github.com/tailwindlabs/tailwindcss/pull/12717))
+
+## [3.4.0] - 2023-12-19
+
+### Added
+
+- Add `svh`, `lvh`, and `dvh` values to default `height`/`min-height`/`max-height` theme ([#11317](https://github.com/tailwindlabs/tailwindcss/pull/11317))
+- Add `has-*` variants for `:has(...)` pseudo-class ([#11318](https://github.com/tailwindlabs/tailwindcss/pull/11318))
+- Add `text-wrap` utilities including `text-balance` and `text-pretty` ([#11320](https://github.com/tailwindlabs/tailwindcss/pull/11320), [#12031](https://github.com/tailwindlabs/tailwindcss/pull/12031))
+- Extend default `opacity` scale to include all steps of 5 ([#11832](https://github.com/tailwindlabs/tailwindcss/pull/11832))
+- Update Preflight `html` styles to include shadow DOM `:host` pseudo-class ([#11200](https://github.com/tailwindlabs/tailwindcss/pull/11200))
+- Increase default values for `grid-rows-*` utilities from 1–6 to 1–12 ([#12180](https://github.com/tailwindlabs/tailwindcss/pull/12180))
+- Add `size-*` utilities ([#12287](https://github.com/tailwindlabs/tailwindcss/pull/12287))
+- Add utilities for CSS subgrid ([#12298](https://github.com/tailwindlabs/tailwindcss/pull/12298))
+- Add spacing scale to `min-w-*`, `min-h-*`, and `max-w-*` utilities ([#12300](https://github.com/tailwindlabs/tailwindcss/pull/12300))
+- Add `forced-color-adjust` utilities ([#11931](https://github.com/tailwindlabs/tailwindcss/pull/11931))
+- Add `forced-colors` variant ([#11694](https://github.com/tailwindlabs/tailwindcss/pull/11694), [#12582](https://github.com/tailwindlabs/tailwindcss/pull/12582))
+- Add `appearance-auto` utility ([#12404](https://github.com/tailwindlabs/tailwindcss/pull/12404))
+- Add logical property values for `float` and `clear` utilities ([#12480](https://github.com/tailwindlabs/tailwindcss/pull/12480))
+- Add `*` variant for targeting direct children ([#12551](https://github.com/tailwindlabs/tailwindcss/pull/12551))
+
+### Changed
+
+- Simplify the `sans` font-family stack ([#11748](https://github.com/tailwindlabs/tailwindcss/pull/11748))
+- Disable the tap highlight overlay on iOS ([#12299](https://github.com/tailwindlabs/tailwindcss/pull/12299))
+- Improve relative precedence of `rtl`, `ltr`, `forced-colors`, and `dark` variants ([#12584](https://github.com/tailwindlabs/tailwindcss/pull/12584))
+
 ## [3.3.7] - 2023-12-18
 
 ### Fixed
@@ -2310,7 +2351,9 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.7...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.1...HEAD
+[3.4.1]: https://github.com/tailwindlabs/tailwindcss/compare/v3.4.0...v3.4.1
+[3.4.0]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.7...v3.4.0
 [3.3.7]: https://github.com/tailwindlabs/tailwindcss/compare/v3.3.6...v3.3.7
 [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

package/lib/corePluginList.js

@@ -32,6 +32,7 @@ const _default = [
     "lineClamp",
     "display",
     "aspectRatio",
+    "size",
     "height",
     "maxHeight",
     "minHeight",
@@ -98,6 +99,7 @@ const _default = [
     "textOverflow",
     "hyphens",
     "whitespace",
+    "textWrap",
     "wordBreak",
     "borderRadius",
     "borderWidth",
@@ -183,5 +185,6 @@ const _default = [
     "transitionDuration",
     "transitionTimingFunction",
     "willChange",
-    "content"
+    "content",
+    "forcedColorAdjust"
 ];

package/lib/corePlugins.js

@@ -81,6 +81,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 let variantPlugins = {
+    childVariant: ({ addVariant  })=>{
+        addVariant("*", "& > *");
+    },
     pseudoElementVariants: ({ addVariant  })=>{
         addVariant("first-letter", "&::first-letter");
         addVariant("first-line", "&::first-line");
@@ -264,15 +267,15 @@ let variantPlugins = {
         }
     },
     directionVariants: ({ addVariant  })=>{
-        addVariant("ltr", ':is([dir="ltr"] &)');
-        addVariant("rtl", ':is([dir="rtl"] &)');
+        addVariant("ltr", '&:where([dir="ltr"], [dir="ltr"] *)');
+        addVariant("rtl", '&:where([dir="rtl"], [dir="rtl"] *)');
     },
     reducedMotionVariants: ({ addVariant  })=>{
         addVariant("motion-safe", "@media (prefers-reduced-motion: no-preference)");
         addVariant("motion-reduce", "@media (prefers-reduced-motion: reduce)");
     },
     darkVariants: ({ config , addVariant  })=>{
-        let [mode, className = ".dark"] = [].concat(config("darkMode", "media"));
+        let [mode, selector = ".dark"] = [].concat(config("darkMode", "media"));
         if (mode === false) {
             mode = "media";
             _log.default.warn("darkmode-false", [
@@ -281,10 +284,48 @@ let variantPlugins = {
                 "https://tailwindcss.com/docs/upgrade-guide#remove-dark-mode-configuration"
             ]);
         }
-        if (mode === "class") {
-            addVariant("dark", `:is(${className} &)`);
+        if (mode === "variant") {
+            let formats;
+            if (Array.isArray(selector)) {
+                formats = selector;
+            } else if (typeof selector === "function") {
+                formats = selector;
+            } else if (typeof selector === "string") {
+                formats = [
+                    selector
+                ];
+            }
+            // TODO: We could also add these warnings if the user passes a function that returns string | string[]
+            // But this is an advanced enough use case that it's probably not necessary
+            if (Array.isArray(formats)) {
+                for (let format of formats){
+                    if (format === ".dark") {
+                        mode = false;
+                        _log.default.warn("darkmode-variant-without-selector", [
+                            "When using `variant` for `darkMode`, you must provide a selector.",
+                            'Example: `darkMode: ["variant", ".your-selector &"]`'
+                        ]);
+                    } else if (!format.includes("&")) {
+                        mode = false;
+                        _log.default.warn("darkmode-variant-without-ampersand", [
+                            "When using `variant` for `darkMode`, your selector must contain `&`.",
+                            'Example `darkMode: ["variant", ".your-selector &"]`'
+                        ]);
+                    }
+                }
+            }
+            selector = formats;
+        }
+        if (mode === "selector") {
+            // New preferred behavior
+            addVariant("dark", `&:where(${selector}, ${selector} *)`);
         } else if (mode === "media") {
             addVariant("dark", "@media (prefers-color-scheme: dark)");
+        } else if (mode === "variant") {
+            addVariant("dark", selector);
+        } else if (mode === "class") {
+            // Old behavior
+            addVariant("dark", `:is(${selector} &)`);
         }
     },
     printVariant: ({ addVariant  })=>{
@@ -419,6 +460,17 @@ let variantPlugins = {
             values: (_theme = theme("supports")) !== null && _theme !== void 0 ? _theme : {}
         });
     },
+    hasVariants: ({ matchVariant  })=>{
+        matchVariant("has", (value)=>`&:has(${(0, _dataTypes.normalize)(value)})`, {
+            values: {}
+        });
+        matchVariant("group-has", (value, { modifier  })=>modifier ? `:merge(.group\\/${modifier}):has(${(0, _dataTypes.normalize)(value)}) &` : `:merge(.group):has(${(0, _dataTypes.normalize)(value)}) &`, {
+            values: {}
+        });
+        matchVariant("peer-has", (value, { modifier  })=>modifier ? `:merge(.peer\\/${modifier}):has(${(0, _dataTypes.normalize)(value)}) ~ &` : `:merge(.peer):has(${(0, _dataTypes.normalize)(value)}) ~ &`, {
+            values: {}
+        });
+    },
     ariaVariants: ({ matchVariant , theme  })=>{
         var _theme;
         matchVariant("aria", (value)=>`&[aria-${(0, _dataTypes.normalize)(value)}]`, {
@@ -454,6 +506,9 @@ let variantPlugins = {
     prefersContrastVariants: ({ addVariant  })=>{
         addVariant("contrast-more", "@media (prefers-contrast: more)");
         addVariant("contrast-less", "@media (prefers-contrast: less)");
+    },
+    forcedColorsVariants: ({ addVariant  })=>{
+        addVariant("forced-colors", "@media (forced-colors: active)");
     }
 };
 let cssTransformValue = [
@@ -774,6 +829,12 @@ let corePlugins = {
     ]),
     float: ({ addUtilities  })=>{
         addUtilities({
+            ".float-start": {
+                float: "inline-start"
+            },
+            ".float-end": {
+                float: "inline-end"
+            },
             ".float-right": {
                 float: "right"
             },
@@ -787,6 +848,12 @@ let corePlugins = {
     },
     clear: ({ addUtilities  })=>{
         addUtilities({
+            ".clear-start": {
+                clear: "inline-start"
+            },
+            ".clear-end": {
+                clear: "inline-end"
+            },
             ".clear-left": {
                 clear: "left"
             },
@@ -970,6 +1037,15 @@ let corePlugins = {
             ]
         ]
     ]),
+    size: (0, _createUtilityPlugin.default)("size", [
+        [
+            "size",
+            [
+                "width",
+                "height"
+            ]
+        ]
+    ]),
     height: (0, _createUtilityPlugin.default)("height", [
         [
             "h",
@@ -1613,6 +1689,9 @@ let corePlugins = {
         addUtilities({
             ".appearance-none": {
                 appearance: "none"
+            },
+            ".appearance-auto": {
+                appearance: "auto"
             }
         });
     },
@@ -2297,6 +2376,22 @@ let corePlugins = {
             }
         });
     },
+    textWrap: ({ addUtilities  })=>{
+        addUtilities({
+            ".text-wrap": {
+                "text-wrap": "wrap"
+            },
+            ".text-nowrap": {
+                "text-wrap": "nowrap"
+            },
+            ".text-balance": {
+                "text-wrap": "balance"
+            },
+            ".text-pretty": {
+                "text-wrap": "pretty"
+            }
+        });
+    },
     wordBreak: ({ addUtilities  })=>{
         addUtilities({
             ".break-normal": {
@@ -4173,5 +4268,15 @@ let corePlugins = {
                 ]
             ]
         ]
-    ])
+    ]),
+    forcedColorAdjust: ({ addUtilities  })=>{
+        addUtilities({
+            ".forced-color-adjust-auto": {
+                "forced-color-adjust": "auto"
+            },
+            ".forced-color-adjust-none": {
+                "forced-color-adjust": "none"
+            }
+        });
+    }
 };

package/lib/css/preflight.css

@@ -24,16 +24,19 @@
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
 6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
 */
 
-html {
+html,
+:host {
   line-height: 1.5; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
   -moz-tab-size: 4; /* 3 */
   tab-size: 4; /* 3 */
-  font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 4 */
+  font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 4 */
   font-feature-settings: theme('fontFamily.sans[1].fontFeatureSettings', normal); /* 5 */
   font-variation-settings: theme('fontFamily.sans[1].fontVariationSettings', normal); /* 6 */
+  -webkit-tap-highlight-color: transparent; /* 7 */
 }
 
 /*

package/lib/lib/generateRules.js

@@ -162,6 +162,9 @@ function applyImportant(matches, classCandidate) {
         return matches;
     }
     let result = [];
+    function isInKeyframes(rule) {
+        return rule.parent && rule.parent.type === "atrule" && rule.parent.name === "keyframes";
+    }
     for (let [meta, rule] of matches){
         let container = _postcss.default.root({
             nodes: [
@@ -169,6 +172,11 @@ function applyImportant(matches, classCandidate) {
             ]
         });
         container.walkRules((r)=>{
+            // Declarations inside keyframes cannot be marked as important
+            // They will be ignored by the browser
+            if (isInKeyframes(r)) {
+                return;
+            }
             let ast = (0, _postcssselectorparser.default)().astSync(r.selector);
             // Remove extraneous selectors that do not include the base candidate
             ast.each((sel)=>(0, _formatVariantSelector.eliminateIrrelevantSelectors)(sel, classCandidate));

package/lib/lib/setupContextUtils.js

@@ -751,21 +751,40 @@ function resolvePlugins(context, root) {
     // TODO: This is a workaround for backwards compatibility, since custom variants
     // were historically sorted before screen/stackable variants.
     let beforeVariants = [
+        _corePlugins.variantPlugins["childVariant"],
         _corePlugins.variantPlugins["pseudoElementVariants"],
         _corePlugins.variantPlugins["pseudoClassVariants"],
+        _corePlugins.variantPlugins["hasVariants"],
         _corePlugins.variantPlugins["ariaVariants"],
         _corePlugins.variantPlugins["dataVariants"]
     ];
     let afterVariants = [
         _corePlugins.variantPlugins["supportsVariants"],
-        _corePlugins.variantPlugins["directionVariants"],
         _corePlugins.variantPlugins["reducedMotionVariants"],
         _corePlugins.variantPlugins["prefersContrastVariants"],
-        _corePlugins.variantPlugins["darkVariants"],
-        _corePlugins.variantPlugins["printVariant"],
         _corePlugins.variantPlugins["screenVariants"],
-        _corePlugins.variantPlugins["orientationVariants"]
+        _corePlugins.variantPlugins["orientationVariants"],
+        _corePlugins.variantPlugins["directionVariants"],
+        _corePlugins.variantPlugins["darkVariants"],
+        _corePlugins.variantPlugins["forcedColorsVariants"],
+        _corePlugins.variantPlugins["printVariant"]
     ];
+    // This is a compatibility fix for the pre 3.4 dark mode behavior
+    // `class` retains the old behavior, but `selector` keeps the new behavior
+    let isLegacyDarkMode = context.tailwindConfig.darkMode === "class" || Array.isArray(context.tailwindConfig.darkMode) && context.tailwindConfig.darkMode[0] === "class";
+    if (isLegacyDarkMode) {
+        afterVariants = [
+            _corePlugins.variantPlugins["supportsVariants"],
+            _corePlugins.variantPlugins["reducedMotionVariants"],
+            _corePlugins.variantPlugins["prefersContrastVariants"],
+            _corePlugins.variantPlugins["darkVariants"],
+            _corePlugins.variantPlugins["screenVariants"],
+            _corePlugins.variantPlugins["orientationVariants"],
+            _corePlugins.variantPlugins["directionVariants"],
+            _corePlugins.variantPlugins["forcedColorsVariants"],
+            _corePlugins.variantPlugins["printVariant"]
+        ];
+    }
     return [
         ...corePluginList,
         ...beforeVariants,

package/lib/util/dataTypes.js

@@ -140,7 +140,13 @@ function normalize(value, context = null, isRoot = true) {
         "keyboard-inset-bottom",
         "keyboard-inset-left",
         "keyboard-inset-width",
-        "keyboard-inset-height"
+        "keyboard-inset-height",
+        "radial-gradient",
+        "linear-gradient",
+        "conic-gradient",
+        "repeating-radial-gradient",
+        "repeating-linear-gradient",
+        "repeating-conic-gradient"
     ];
     return value.replace(/(calc|min|max|clamp)\(.+\)/g, (match)=>{
         let result = "";
@@ -186,6 +192,10 @@ function normalize(value, context = null, isRoot = true) {
                 result += consumeUntil([
                     ")"
                 ]);
+            } else if (peek("[")) {
+                result += consumeUntil([
+                    "]"
+                ]);
             } else if ([
                 "+",
                 "-",

package/lib/util/pseudoElements.js

@@ -114,6 +114,9 @@ let elementProperties = {
         "terminal",
         "jumpable"
     ],
+    ":where": [],
+    ":is": [],
+    ":has": [],
     // The default value is used when the pseudo-element is not recognized
     // Because it's not recognized, we don't know if it's terminal or not
     // So we assume it can be moved AND can have user-action pseudo classes attached to it

package/package.json

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

package/src/corePluginList.js

@@ -1 +1 @@
-export default ["preflight","container","accessibility","pointerEvents","visibility","position","inset","isolation","zIndex","order","gridColumn","gridColumnStart","gridColumnEnd","gridRow","gridRowStart","gridRowEnd","float","clear","margin","boxSizing","lineClamp","display","aspectRatio","height","maxHeight","minHeight","width","minWidth","maxWidth","flex","flexShrink","flexGrow","flexBasis","tableLayout","captionSide","borderCollapse","borderSpacing","transformOrigin","translate","rotate","skew","scale","transform","animation","cursor","touchAction","userSelect","resize","scrollSnapType","scrollSnapAlign","scrollSnapStop","scrollMargin","scrollPadding","listStylePosition","listStyleType","listStyleImage","appearance","columns","breakBefore","breakInside","breakAfter","gridAutoColumns","gridAutoFlow","gridAutoRows","gridTemplateColumns","gridTemplateRows","flexDirection","flexWrap","placeContent","placeItems","alignContent","alignItems","justifyContent","justifyItems","gap","space","divideWidth","divideStyle","divideColor","divideOpacity","placeSelf","alignSelf","justifySelf","overflow","overscrollBehavior","scrollBehavior","textOverflow","hyphens","whitespace","wordBreak","borderRadius","borderWidth","borderStyle","borderColor","borderOpacity","backgroundColor","backgroundOpacity","backgroundImage","gradientColorStops","boxDecorationBreak","backgroundSize","backgroundAttachment","backgroundClip","backgroundPosition","backgroundRepeat","backgroundOrigin","fill","stroke","strokeWidth","objectFit","objectPosition","padding","textAlign","textIndent","verticalAlign","fontFamily","fontSize","fontWeight","textTransform","fontStyle","fontVariantNumeric","lineHeight","letterSpacing","textColor","textOpacity","textDecoration","textDecorationColor","textDecorationStyle","textDecorationThickness","textUnderlineOffset","fontSmoothing","placeholderColor","placeholderOpacity","caretColor","accentColor","opacity","backgroundBlendMode","mixBlendMode","boxShadow","boxShadowColor","outlineStyle","outlineWidth","outlineOffset","outlineColor","ringWidth","ringColor","ringOpacity","ringOffsetWidth","ringOffsetColor","blur","brightness","contrast","dropShadow","grayscale","hueRotate","invert","saturate","sepia","filter","backdropBlur","backdropBrightness","backdropContrast","backdropGrayscale","backdropHueRotate","backdropInvert","backdropOpacity","backdropSaturate","backdropSepia","backdropFilter","transitionProperty","transitionDelay","transitionDuration","transitionTimingFunction","willChange","content"]
+export default ["preflight","container","accessibility","pointerEvents","visibility","position","inset","isolation","zIndex","order","gridColumn","gridColumnStart","gridColumnEnd","gridRow","gridRowStart","gridRowEnd","float","clear","margin","boxSizing","lineClamp","display","aspectRatio","size","height","maxHeight","minHeight","width","minWidth","maxWidth","flex","flexShrink","flexGrow","flexBasis","tableLayout","captionSide","borderCollapse","borderSpacing","transformOrigin","translate","rotate","skew","scale","transform","animation","cursor","touchAction","userSelect","resize","scrollSnapType","scrollSnapAlign","scrollSnapStop","scrollMargin","scrollPadding","listStylePosition","listStyleType","listStyleImage","appearance","columns","breakBefore","breakInside","breakAfter","gridAutoColumns","gridAutoFlow","gridAutoRows","gridTemplateColumns","gridTemplateRows","flexDirection","flexWrap","placeContent","placeItems","alignContent","alignItems","justifyContent","justifyItems","gap","space","divideWidth","divideStyle","divideColor","divideOpacity","placeSelf","alignSelf","justifySelf","overflow","overscrollBehavior","scrollBehavior","textOverflow","hyphens","whitespace","textWrap","wordBreak","borderRadius","borderWidth","borderStyle","borderColor","borderOpacity","backgroundColor","backgroundOpacity","backgroundImage","gradientColorStops","boxDecorationBreak","backgroundSize","backgroundAttachment","backgroundClip","backgroundPosition","backgroundRepeat","backgroundOrigin","fill","stroke","strokeWidth","objectFit","objectPosition","padding","textAlign","textIndent","verticalAlign","fontFamily","fontSize","fontWeight","textTransform","fontStyle","fontVariantNumeric","lineHeight","letterSpacing","textColor","textOpacity","textDecoration","textDecorationColor","textDecorationStyle","textDecorationThickness","textUnderlineOffset","fontSmoothing","placeholderColor","placeholderOpacity","caretColor","accentColor","opacity","backgroundBlendMode","mixBlendMode","boxShadow","boxShadowColor","outlineStyle","outlineWidth","outlineOffset","outlineColor","ringWidth","ringColor","ringOpacity","ringOffsetWidth","ringOffsetColor","blur","brightness","contrast","dropShadow","grayscale","hueRotate","invert","saturate","sepia","filter","backdropBlur","backdropBrightness","backdropContrast","backdropGrayscale","backdropHueRotate","backdropInvert","backdropOpacity","backdropSaturate","backdropSepia","backdropFilter","transitionProperty","transitionDelay","transitionDuration","transitionTimingFunction","willChange","content","forcedColorAdjust"]

package/src/corePlugins.js

@@ -25,6 +25,9 @@ import { normalize } from './util/dataTypes'
 import { INTERNAL_FEATURES } from './lib/setupContextUtils'
 
 export let variantPlugins = {
+  childVariant: ({ addVariant }) => {
+    addVariant('*', '& > *')
+  },
   pseudoElementVariants: ({ addVariant }) => {
     addVariant('first-letter', '&::first-letter')
     addVariant('first-line', '&::first-line')
@@ -204,8 +207,8 @@ export let variantPlugins = {
   },
 
   directionVariants: ({ addVariant }) => {
-    addVariant('ltr', ':is([dir="ltr"] &)')
-    addVariant('rtl', ':is([dir="rtl"] &)')
+    addVariant('ltr', '&:where([dir="ltr"], [dir="ltr"] *)')
+    addVariant('rtl', '&:where([dir="rtl"], [dir="rtl"] *)')
   },
 
   reducedMotionVariants: ({ addVariant }) => {
@@ -214,7 +217,7 @@ export let variantPlugins = {
   },
 
   darkVariants: ({ config, addVariant }) => {
-    let [mode, className = '.dark'] = [].concat(config('darkMode', 'media'))
+    let [mode, selector = '.dark'] = [].concat(config('darkMode', 'media'))
 
     if (mode === false) {
       mode = 'media'
@@ -225,10 +228,49 @@ export let variantPlugins = {
       ])
     }
 
-    if (mode === 'class') {
-      addVariant('dark', `:is(${className} &)`)
+    if (mode === 'variant') {
+      let formats
+      if (Array.isArray(selector)) {
+        formats = selector
+      } else if (typeof selector === 'function') {
+        formats = selector
+      } else if (typeof selector === 'string') {
+        formats = [selector]
+      }
+
+      // TODO: We could also add these warnings if the user passes a function that returns string | string[]
+      // But this is an advanced enough use case that it's probably not necessary
+      if (Array.isArray(formats)) {
+        for (let format of formats) {
+          if (format === '.dark') {
+            mode = false
+            log.warn('darkmode-variant-without-selector', [
+              'When using `variant` for `darkMode`, you must provide a selector.',
+              'Example: `darkMode: ["variant", ".your-selector &"]`',
+            ])
+          } else if (!format.includes('&')) {
+            mode = false
+            log.warn('darkmode-variant-without-ampersand', [
+              'When using `variant` for `darkMode`, your selector must contain `&`.',
+              'Example `darkMode: ["variant", ".your-selector &"]`',
+            ])
+          }
+        }
+      }
+
+      selector = formats
+    }
+
+    if (mode === 'selector') {
+      // New preferred behavior
+      addVariant('dark', `&:where(${selector}, ${selector} *)`)
     } else if (mode === 'media') {
       addVariant('dark', '@media (prefers-color-scheme: dark)')
+    } else if (mode === 'variant') {
+      addVariant('dark', selector)
+    } else if (mode === 'class') {
+      // Old behavior
+      addVariant('dark', `:is(${selector} &)`)
     }
   },
 
@@ -392,6 +434,26 @@ export let variantPlugins = {
     )
   },
 
+  hasVariants: ({ matchVariant }) => {
+    matchVariant('has', (value) => `&:has(${normalize(value)})`, { values: {} })
+    matchVariant(
+      'group-has',
+      (value, { modifier }) =>
+        modifier
+          ? `:merge(.group\\/${modifier}):has(${normalize(value)}) &`
+          : `:merge(.group):has(${normalize(value)}) &`,
+      { values: {} }
+    )
+    matchVariant(
+      'peer-has',
+      (value, { modifier }) =>
+        modifier
+          ? `:merge(.peer\\/${modifier}):has(${normalize(value)}) ~ &`
+          : `:merge(.peer):has(${normalize(value)}) ~ &`,
+      { values: {} }
+    )
+  },
+
   ariaVariants: ({ matchVariant, theme }) => {
     matchVariant('aria', (value) => `&[aria-${normalize(value)}]`, { values: theme('aria') ?? {} })
     matchVariant(
@@ -441,6 +503,10 @@ export let variantPlugins = {
     addVariant('contrast-more', '@media (prefers-contrast: more)')
     addVariant('contrast-less', '@media (prefers-contrast: less)')
   },
+
+  forcedColorsVariants: ({ addVariant }) => {
+    addVariant('forced-colors', '@media (forced-colors: active)')
+  },
 }
 
 let cssTransformValue = [
@@ -666,6 +732,8 @@ export let corePlugins = {
 
   float: ({ addUtilities }) => {
     addUtilities({
+      '.float-start': { float: 'inline-start' },
+      '.float-end': { float: 'inline-end' },
       '.float-right': { float: 'right' },
       '.float-left': { float: 'left' },
       '.float-none': { float: 'none' },
@@ -674,6 +742,8 @@ export let corePlugins = {
 
   clear: ({ addUtilities }) => {
     addUtilities({
+      '.clear-start': { clear: 'inline-start' },
+      '.clear-end': { clear: 'inline-end' },
       '.clear-left': { clear: 'left' },
       '.clear-right': { clear: 'right' },
       '.clear-both': { clear: 'both' },
@@ -759,6 +829,8 @@ export let corePlugins = {
 
   aspectRatio: createUtilityPlugin('aspectRatio', [['aspect', ['aspect-ratio']]]),
 
+  size: createUtilityPlugin('size', [['size', ['width', 'height']]]),
+
   height: createUtilityPlugin('height', [['h', ['height']]]),
   maxHeight: createUtilityPlugin('maxHeight', [['max-h', ['maxHeight']]]),
   minHeight: createUtilityPlugin('minHeight', [['min-h', ['minHeight']]]),
@@ -1109,6 +1181,7 @@ export let corePlugins = {
   appearance: ({ addUtilities }) => {
     addUtilities({
       '.appearance-none': { appearance: 'none' },
+      '.appearance-auto': { appearance: 'auto' },
     })
   },
 
@@ -1509,6 +1582,15 @@ export let corePlugins = {
     })
   },
 
+  textWrap: ({ addUtilities }) => {
+    addUtilities({
+      '.text-wrap': { 'text-wrap': 'wrap' },
+      '.text-nowrap': { 'text-wrap': 'nowrap' },
+      '.text-balance': { 'text-wrap': 'balance' },
+      '.text-pretty': { 'text-wrap': 'pretty' },
+    })
+  },
+
   wordBreak: ({ addUtilities }) => {
     addUtilities({
       '.break-normal': { 'overflow-wrap': 'normal', 'word-break': 'normal' },
@@ -2852,4 +2934,10 @@ export let corePlugins = {
   content: createUtilityPlugin('content', [
     ['content', ['--tw-content', ['content', 'var(--tw-content)']]],
   ]),
+  forcedColorAdjust: ({ addUtilities }) => {
+    addUtilities({
+      '.forced-color-adjust-auto': { 'forced-color-adjust': 'auto' },
+      '.forced-color-adjust-none': { 'forced-color-adjust': 'none' },
+    })
+  },
 }

package/src/css/preflight.css

@@ -24,16 +24,19 @@
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
 6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
 */
 
-html {
+html,
+:host {
   line-height: 1.5; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
   -moz-tab-size: 4; /* 3 */
   tab-size: 4; /* 3 */
-  font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 4 */
+  font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 4 */
   font-feature-settings: theme('fontFamily.sans[1].fontFeatureSettings', normal); /* 5 */
   font-variation-settings: theme('fontFamily.sans[1].fontVariationSettings', normal); /* 6 */
+  -webkit-tap-highlight-color: transparent; /* 7 */
 }
 
 /*

package/src/lib/generateRules.js

@@ -119,10 +119,20 @@ function applyImportant(matches, classCandidate) {
 
   let result = []
 
+  function isInKeyframes(rule) {
+    return rule.parent && rule.parent.type === 'atrule' && rule.parent.name === 'keyframes'
+  }
+
   for (let [meta, rule] of matches) {
     let container = postcss.root({ nodes: [rule.clone()] })
 
     container.walkRules((r) => {
+      // Declarations inside keyframes cannot be marked as important
+      // They will be ignored by the browser
+      if (isInKeyframes(r)) {
+        return
+      }
+
       let ast = selectorParser().astSync(r.selector)
 
       // Remove extraneous selectors that do not include the base candidate

package/src/lib/setupContextUtils.js

@@ -756,22 +756,46 @@ function resolvePlugins(context, root) {
   // TODO: This is a workaround for backwards compatibility, since custom variants
   // were historically sorted before screen/stackable variants.
   let beforeVariants = [
+    variantPlugins['childVariant'],
     variantPlugins['pseudoElementVariants'],
     variantPlugins['pseudoClassVariants'],
+    variantPlugins['hasVariants'],
     variantPlugins['ariaVariants'],
     variantPlugins['dataVariants'],
   ]
   let afterVariants = [
     variantPlugins['supportsVariants'],
-    variantPlugins['directionVariants'],
     variantPlugins['reducedMotionVariants'],
     variantPlugins['prefersContrastVariants'],
-    variantPlugins['darkVariants'],
-    variantPlugins['printVariant'],
     variantPlugins['screenVariants'],
     variantPlugins['orientationVariants'],
+    variantPlugins['directionVariants'],
+    variantPlugins['darkVariants'],
+    variantPlugins['forcedColorsVariants'],
+    variantPlugins['printVariant'],
   ]
 
+  // This is a compatibility fix for the pre 3.4 dark mode behavior
+  // `class` retains the old behavior, but `selector` keeps the new behavior
+  let isLegacyDarkMode =
+    context.tailwindConfig.darkMode === 'class' ||
+    (Array.isArray(context.tailwindConfig.darkMode) &&
+      context.tailwindConfig.darkMode[0] === 'class')
+
+  if (isLegacyDarkMode) {
+    afterVariants = [
+      variantPlugins['supportsVariants'],
+      variantPlugins['reducedMotionVariants'],
+      variantPlugins['prefersContrastVariants'],
+      variantPlugins['darkVariants'],
+      variantPlugins['screenVariants'],
+      variantPlugins['orientationVariants'],
+      variantPlugins['directionVariants'],
+      variantPlugins['forcedColorsVariants'],
+      variantPlugins['printVariant'],
+    ]
+  }
+
   return [...corePluginList, ...beforeVariants, ...userPlugins, ...afterVariants, ...layerPlugins]
 }
 

package/src/util/dataTypes.js

@@ -106,6 +106,13 @@ function normalizeMathOperatorSpacing(value) {
     'keyboard-inset-left',
     'keyboard-inset-width',
     'keyboard-inset-height',
+
+    'radial-gradient',
+    'linear-gradient',
+    'conic-gradient',
+    'repeating-radial-gradient',
+    'repeating-linear-gradient',
+    'repeating-conic-gradient',
   ]
 
   return value.replace(/(calc|min|max|clamp)\(.+\)/g, (match) => {
@@ -161,6 +168,11 @@ function normalizeMathOperatorSpacing(value) {
         result += consumeUntil([')'])
       }
 
+      // Don't break CSS grid track names
+      else if (peek('[')) {
+        result += consumeUntil([']'])
+      }
+
       // Handle operators
       else if (
         ['+', '-', '*', '/'].includes(char) &&

package/src/util/pseudoElements.js

@@ -60,6 +60,10 @@ let elementProperties = {
   ':first-letter': ['terminal', 'jumpable'],
   ':first-line': ['terminal', 'jumpable'],
 
+  ':where': [],
+  ':is': [],
+  ':has': [],
+
   // The default value is used when the pseudo-element is not recognized
   // Because it's not recognized, we don't know if it's terminal or not
   // So we assume it can be moved AND can have user-action pseudo classes attached to it

package/stubs/config.full.js

@@ -303,13 +303,6 @@ module.exports = {
       sans: [
         'ui-sans-serif',
         'system-ui',
-        '-apple-system',
-        'BlinkMacSystemFont',
-        '"Segoe UI"',
-        'Roboto',
-        '"Helvetica Neue"',
-        'Arial',
-        '"Noto Sans"',
         'sans-serif',
         '"Apple Color Emoji"',
         '"Segoe UI Emoji"',
@@ -451,6 +444,12 @@ module.exports = {
       'span-4': 'span 4 / span 4',
       'span-5': 'span 5 / span 5',
       'span-6': 'span 6 / span 6',
+      'span-7': 'span 7 / span 7',
+      'span-8': 'span 8 / span 8',
+      'span-9': 'span 9 / span 9',
+      'span-10': 'span 10 / span 10',
+      'span-11': 'span 11 / span 11',
+      'span-12': 'span 12 / span 12',
       'span-full': '1 / -1',
     },
     gridRowEnd: {
@@ -462,6 +461,12 @@ module.exports = {
       5: '5',
       6: '6',
       7: '7',
+      8: '8',
+      9: '9',
+      10: '10',
+      11: '11',
+      12: '12',
+      13: '13',
     },
     gridRowStart: {
       auto: 'auto',
@@ -472,9 +477,16 @@ module.exports = {
       5: '5',
       6: '6',
       7: '7',
+      8: '8',
+      9: '9',
+      10: '10',
+      11: '11',
+      12: '12',
+      13: '13',
     },
     gridTemplateColumns: {
       none: 'none',
+      subgrid: 'subgrid',
       1: 'repeat(1, minmax(0, 1fr))',
       2: 'repeat(2, minmax(0, 1fr))',
       3: 'repeat(3, minmax(0, 1fr))',
@@ -490,12 +502,19 @@ module.exports = {
     },
     gridTemplateRows: {
       none: 'none',
+      subgrid: 'subgrid',
       1: 'repeat(1, minmax(0, 1fr))',
       2: 'repeat(2, minmax(0, 1fr))',
       3: 'repeat(3, minmax(0, 1fr))',
       4: 'repeat(4, minmax(0, 1fr))',
       5: 'repeat(5, minmax(0, 1fr))',
       6: 'repeat(6, minmax(0, 1fr))',
+      7: 'repeat(7, minmax(0, 1fr))',
+      8: 'repeat(8, minmax(0, 1fr))',
+      9: 'repeat(9, minmax(0, 1fr))',
+      10: 'repeat(10, minmax(0, 1fr))',
+      11: 'repeat(11, minmax(0, 1fr))',
+      12: 'repeat(12, minmax(0, 1fr))',
     },
     height: ({ theme }) => ({
       auto: 'auto',
@@ -517,6 +536,9 @@ module.exports = {
       '5/6': '83.333333%',
       full: '100%',
       screen: '100vh',
+      svh: '100svh',
+      lvh: '100lvh',
+      dvh: '100dvh',
       min: 'min-content',
       max: 'max-content',
       fit: 'fit-content',
@@ -621,13 +643,16 @@ module.exports = {
       none: 'none',
       full: '100%',
       screen: '100vh',
+      svh: '100svh',
+      lvh: '100lvh',
+      dvh: '100dvh',
       min: 'min-content',
       max: 'max-content',
       fit: 'fit-content',
     }),
     maxWidth: ({ theme, breakpoints }) => ({
+      ...theme('spacing'),
       none: 'none',
-      0: '0rem',
       xs: '20rem',
       sm: '24rem',
       md: '28rem',
@@ -646,21 +671,24 @@ module.exports = {
       prose: '65ch',
       ...breakpoints(theme('screens')),
     }),
-    minHeight: {
-      0: '0px',
+    minHeight: ({ theme }) => ({
+      ...theme('spacing'),
       full: '100%',
       screen: '100vh',
+      svh: '100svh',
+      lvh: '100lvh',
+      dvh: '100dvh',
       min: 'min-content',
       max: 'max-content',
       fit: 'fit-content',
-    },
-    minWidth: {
-      0: '0px',
+    }),
+    minWidth: ({ theme }) => ({
+      ...theme('spacing'),
       full: '100%',
       min: 'min-content',
       max: 'max-content',
       fit: 'fit-content',
-    },
+    }),
     objectPosition: {
       bottom: 'bottom',
       center: 'center',
@@ -676,15 +704,21 @@ module.exports = {
       0: '0',
       5: '0.05',
       10: '0.1',
+      15: '0.15',
       20: '0.2',
       25: '0.25',
       30: '0.3',
+      35: '0.35',
       40: '0.4',
+      45: '0.45',
       50: '0.5',
+      55: '0.55',
       60: '0.6',
+      65: '0.65',
       70: '0.7',
       75: '0.75',
       80: '0.8',
+      85: '0.85',
       90: '0.9',
       95: '0.95',
       100: '1',
@@ -936,6 +970,40 @@ module.exports = {
       '3/4': '75%',
       full: '100%',
     }),
+    size: ({ theme }) => ({
+      auto: 'auto',
+      ...theme('spacing'),
+      '1/2': '50%',
+      '1/3': '33.333333%',
+      '2/3': '66.666667%',
+      '1/4': '25%',
+      '2/4': '50%',
+      '3/4': '75%',
+      '1/5': '20%',
+      '2/5': '40%',
+      '3/5': '60%',
+      '4/5': '80%',
+      '1/6': '16.666667%',
+      '2/6': '33.333333%',
+      '3/6': '50%',
+      '4/6': '66.666667%',
+      '5/6': '83.333333%',
+      '1/12': '8.333333%',
+      '2/12': '16.666667%',
+      '3/12': '25%',
+      '4/12': '33.333333%',
+      '5/12': '41.666667%',
+      '6/12': '50%',
+      '7/12': '58.333333%',
+      '8/12': '66.666667%',
+      '9/12': '75%',
+      '10/12': '83.333333%',
+      '11/12': '91.666667%',
+      full: '100%',
+      min: 'min-content',
+      max: 'max-content',
+      fit: 'fit-content',
+    }),
     width: ({ theme }) => ({
       auto: 'auto',
       ...theme('spacing'),
@@ -967,6 +1035,9 @@ module.exports = {
       '11/12': '91.666667%',
       full: '100%',
       screen: '100vw',
+      svw: '100svw',
+      lvw: '100lvw',
+      dvw: '100dvw',
       min: 'min-content',
       max: 'max-content',
       fit: 'fit-content',

package/types/config.d.ts

@@ -74,6 +74,13 @@ type DarkModeConfig =
   | 'class'
   // Use the `class` strategy with a custom class instead of `.dark`.
   | ['class', string]
+  // Use the `selector` strategy — same as `class` but uses `:where()` for more predicable behavior
+  | 'selector'
+  // Use the `selector` strategy with a custom selector instead of `.dark`.
+  | ['selector', string]
+  // Use the `variant` strategy, which allows you to completely customize the selector
+  // It takes a string or an array of strings, which are passed directly to `addVariant()`
+  | ['variant', string | string[]]
 
 type Screen = { raw: string } | { min: string } | { max: string } | { min: string; max: string }
 type ScreensConfig = string[] | KeyValuePair<string, string | Screen | Screen[]>

package/types/generated/corePluginList.d.ts

@@ -1 +1 @@
-export type CorePluginList = 'preflight' | 'container' | 'accessibility' | 'pointerEvents' | 'visibility' | 'position' | 'inset' | 'isolation' | 'zIndex' | 'order' | 'gridColumn' | 'gridColumnStart' | 'gridColumnEnd' | 'gridRow' | 'gridRowStart' | 'gridRowEnd' | 'float' | 'clear' | 'margin' | 'boxSizing' | 'lineClamp' | 'display' | 'aspectRatio' | 'height' | 'maxHeight' | 'minHeight' | 'width' | 'minWidth' | 'maxWidth' | 'flex' | 'flexShrink' | 'flexGrow' | 'flexBasis' | 'tableLayout' | 'captionSide' | 'borderCollapse' | 'borderSpacing' | 'transformOrigin' | 'translate' | 'rotate' | 'skew' | 'scale' | 'transform' | 'animation' | 'cursor' | 'touchAction' | 'userSelect' | 'resize' | 'scrollSnapType' | 'scrollSnapAlign' | 'scrollSnapStop' | 'scrollMargin' | 'scrollPadding' | 'listStylePosition' | 'listStyleType' | 'listStyleImage' | 'appearance' | 'columns' | 'breakBefore' | 'breakInside' | 'breakAfter' | 'gridAutoColumns' | 'gridAutoFlow' | 'gridAutoRows' | 'gridTemplateColumns' | 'gridTemplateRows' | 'flexDirection' | 'flexWrap' | 'placeContent' | 'placeItems' | 'alignContent' | 'alignItems' | 'justifyContent' | 'justifyItems' | 'gap' | 'space' | 'divideWidth' | 'divideStyle' | 'divideColor' | 'divideOpacity' | 'placeSelf' | 'alignSelf' | 'justifySelf' | 'overflow' | 'overscrollBehavior' | 'scrollBehavior' | 'textOverflow' | 'hyphens' | 'whitespace' | 'wordBreak' | 'borderRadius' | 'borderWidth' | 'borderStyle' | 'borderColor' | 'borderOpacity' | 'backgroundColor' | 'backgroundOpacity' | 'backgroundImage' | 'gradientColorStops' | 'boxDecorationBreak' | 'backgroundSize' | 'backgroundAttachment' | 'backgroundClip' | 'backgroundPosition' | 'backgroundRepeat' | 'backgroundOrigin' | 'fill' | 'stroke' | 'strokeWidth' | 'objectFit' | 'objectPosition' | 'padding' | 'textAlign' | 'textIndent' | 'verticalAlign' | 'fontFamily' | 'fontSize' | 'fontWeight' | 'textTransform' | 'fontStyle' | 'fontVariantNumeric' | 'lineHeight' | 'letterSpacing' | 'textColor' | 'textOpacity' | 'textDecoration' | 'textDecorationColor' | 'textDecorationStyle' | 'textDecorationThickness' | 'textUnderlineOffset' | 'fontSmoothing' | 'placeholderColor' | 'placeholderOpacity' | 'caretColor' | 'accentColor' | 'opacity' | 'backgroundBlendMode' | 'mixBlendMode' | 'boxShadow' | 'boxShadowColor' | 'outlineStyle' | 'outlineWidth' | 'outlineOffset' | 'outlineColor' | 'ringWidth' | 'ringColor' | 'ringOpacity' | 'ringOffsetWidth' | 'ringOffsetColor' | 'blur' | 'brightness' | 'contrast' | 'dropShadow' | 'grayscale' | 'hueRotate' | 'invert' | 'saturate' | 'sepia' | 'filter' | 'backdropBlur' | 'backdropBrightness' | 'backdropContrast' | 'backdropGrayscale' | 'backdropHueRotate' | 'backdropInvert' | 'backdropOpacity' | 'backdropSaturate' | 'backdropSepia' | 'backdropFilter' | 'transitionProperty' | 'transitionDelay' | 'transitionDuration' | 'transitionTimingFunction' | 'willChange' | 'content'
+export type CorePluginList = 'preflight' | 'container' | 'accessibility' | 'pointerEvents' | 'visibility' | 'position' | 'inset' | 'isolation' | 'zIndex' | 'order' | 'gridColumn' | 'gridColumnStart' | 'gridColumnEnd' | 'gridRow' | 'gridRowStart' | 'gridRowEnd' | 'float' | 'clear' | 'margin' | 'boxSizing' | 'lineClamp' | 'display' | 'aspectRatio' | 'size' | 'height' | 'maxHeight' | 'minHeight' | 'width' | 'minWidth' | 'maxWidth' | 'flex' | 'flexShrink' | 'flexGrow' | 'flexBasis' | 'tableLayout' | 'captionSide' | 'borderCollapse' | 'borderSpacing' | 'transformOrigin' | 'translate' | 'rotate' | 'skew' | 'scale' | 'transform' | 'animation' | 'cursor' | 'touchAction' | 'userSelect' | 'resize' | 'scrollSnapType' | 'scrollSnapAlign' | 'scrollSnapStop' | 'scrollMargin' | 'scrollPadding' | 'listStylePosition' | 'listStyleType' | 'listStyleImage' | 'appearance' | 'columns' | 'breakBefore' | 'breakInside' | 'breakAfter' | 'gridAutoColumns' | 'gridAutoFlow' | 'gridAutoRows' | 'gridTemplateColumns' | 'gridTemplateRows' | 'flexDirection' | 'flexWrap' | 'placeContent' | 'placeItems' | 'alignContent' | 'alignItems' | 'justifyContent' | 'justifyItems' | 'gap' | 'space' | 'divideWidth' | 'divideStyle' | 'divideColor' | 'divideOpacity' | 'placeSelf' | 'alignSelf' | 'justifySelf' | 'overflow' | 'overscrollBehavior' | 'scrollBehavior' | 'textOverflow' | 'hyphens' | 'whitespace' | 'textWrap' | 'wordBreak' | 'borderRadius' | 'borderWidth' | 'borderStyle' | 'borderColor' | 'borderOpacity' | 'backgroundColor' | 'backgroundOpacity' | 'backgroundImage' | 'gradientColorStops' | 'boxDecorationBreak' | 'backgroundSize' | 'backgroundAttachment' | 'backgroundClip' | 'backgroundPosition' | 'backgroundRepeat' | 'backgroundOrigin' | 'fill' | 'stroke' | 'strokeWidth' | 'objectFit' | 'objectPosition' | 'padding' | 'textAlign' | 'textIndent' | 'verticalAlign' | 'fontFamily' | 'fontSize' | 'fontWeight' | 'textTransform' | 'fontStyle' | 'fontVariantNumeric' | 'lineHeight' | 'letterSpacing' | 'textColor' | 'textOpacity' | 'textDecoration' | 'textDecorationColor' | 'textDecorationStyle' | 'textDecorationThickness' | 'textUnderlineOffset' | 'fontSmoothing' | 'placeholderColor' | 'placeholderOpacity' | 'caretColor' | 'accentColor' | 'opacity' | 'backgroundBlendMode' | 'mixBlendMode' | 'boxShadow' | 'boxShadowColor' | 'outlineStyle' | 'outlineWidth' | 'outlineOffset' | 'outlineColor' | 'ringWidth' | 'ringColor' | 'ringOpacity' | 'ringOffsetWidth' | 'ringOffsetColor' | 'blur' | 'brightness' | 'contrast' | 'dropShadow' | 'grayscale' | 'hueRotate' | 'invert' | 'saturate' | 'sepia' | 'filter' | 'backdropBlur' | 'backdropBrightness' | 'backdropContrast' | 'backdropGrayscale' | 'backdropHueRotate' | 'backdropInvert' | 'backdropOpacity' | 'backdropSaturate' | 'backdropSepia' | 'backdropFilter' | 'transitionProperty' | 'transitionDelay' | 'transitionDuration' | 'transitionTimingFunction' | 'willChange' | 'content' | 'forcedColorAdjust'

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

@@ -206,16 +206,38 @@ export type DefaultTheme = {
     string
   >
   gridRow: Record<
-    'auto' | 'span-1' | 'span-2' | 'span-3' | 'span-4' | 'span-5' | 'span-6' | 'span-full',
+    | 'auto'
+    | 'span-1'
+    | 'span-2'
+    | 'span-3'
+    | 'span-4'
+    | 'span-5'
+    | 'span-6'
+    | 'span-7'
+    | 'span-8'
+    | 'span-9'
+    | 'span-10'
+    | 'span-11'
+    | 'span-12'
+    | 'span-full',
+    string
+  >
+  gridRowEnd: Record<
+    '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | '13' | 'auto',
+    string
+  >
+  gridRowStart: Record<
+    '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | '13' | 'auto',
     string
   >
-  gridRowEnd: Record<'1' | '2' | '3' | '4' | '5' | '6' | '7' | 'auto', string>
-  gridRowStart: Record<'1' | '2' | '3' | '4' | '5' | '6' | '7' | 'auto', string>
   gridTemplateColumns: Record<
-    '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'none',
+    '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'none' | 'subgrid',
+    string
+  >
+  gridTemplateRows: Record<
+    '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'none' | 'subgrid',
     string
   >
-  gridTemplateRows: Record<'1' | '2' | '3' | '4' | '5' | '6' | 'none', string>
   hueRotate: Record<'0' | '15' | '30' | '60' | '90' | '180', string>
   invert: Record<'0' | 'DEFAULT', string>
   keyframes: Record<'spin' | 'ping' | 'pulse' | 'bounce', Record<string, CSSDeclarationList>>
@@ -240,8 +262,6 @@ export type DefaultTheme = {
   listStyleType: Record<'none' | 'disc' | 'decimal', string>
   listStyleImage: Record<'none', string>
   lineClamp: Record<'1' | '2' | '3' | '4' | '5' | '6', string>
-  minHeight: Record<'0' | 'full' | 'screen' | 'min' | 'max' | 'fit', string>
-  minWidth: Record<'0' | 'full' | 'min' | 'max' | 'fit', string>
   objectPosition: Record<
     | 'bottom'
     | 'center'
@@ -258,15 +278,21 @@ export type DefaultTheme = {
     | '0'
     | '5'
     | '10'
+    | '15'
     | '20'
     | '25'
     | '30'
+    | '35'
     | '40'
+    | '45'
     | '50'
+    | '55'
     | '60'
+    | '65'
     | '70'
     | '75'
     | '80'
+    | '85'
     | '90'
     | '95'
     | '100',