tailwindcss 0.0.0-insiders.ef325ea → 0.0.0-insiders.f267d91

package/CHANGELOG.md

@@ -15,6 +15,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Add `placeholder` variant ([#6106](https://github.com/tailwindlabs/tailwindcss/pull/6106))
 - Add tuple syntax for configuring screens while guaranteeing order ([#5956](https://github.com/tailwindlabs/tailwindcss/pull/5956))
+- Add combinable `touch-action` support ([#6115](https://github.com/tailwindlabs/tailwindcss/pull/6115))
+- Add support for "arbitrary properties" ([#6161](https://github.com/tailwindlabs/tailwindcss/pull/6161))
+- Add `portrait` and `landscape` variants ([#6046](https://github.com/tailwindlabs/tailwindcss/pull/6046))
+- Add `aspect-attrs` utility by default ([#6178](https://github.com/tailwindlabs/tailwindcss/pull/6178))
+- Add `text-decoration-style`, `text-decoration-thickness`, and `text-underline-offset` utilities ([#6004](https://github.com/tailwindlabs/tailwindcss/pull/6004))
+
+### Changed
+
+- Deprecate `decoration-slice` and `decoration-break` in favor `box-decoration-slice` and `box-decoration-break` _(non-breaking)_ ([#6004](https://github.com/tailwindlabs/tailwindcss/pull/6004))
 
 ## [3.0.0-alpha.2] - 2021-11-08
 

package/lib/corePluginList.js

@@ -126,6 +126,9 @@ var _default = [
     "textOpacity",
     "textDecoration",
     "textDecorationColor",
+    "textDecorationStyle",
+    "textDecorationThickness",
+    "textUnderlineOffset",
     "fontSmoothing",
     "placeholderColor",
     "placeholderOpacity",

package/lib/corePlugins.js

@@ -203,6 +203,10 @@ let variantPlugins = {
             let query = (0, _buildMediaQuery).default(screen);
             addVariant(screen.name, `@media ${query}`);
         }
+    },
+    orientationVariants: ({ addVariant  })=>{
+        addVariant('portrait', '@media (orientation: portrait)');
+        addVariant('landscape', '@media (orientation: landscape)');
     }
 };
 exports.variantPlugins = variantPlugins;
@@ -995,7 +999,15 @@ let corePlugins1 = {
         });
     },
     cursor: (0, _createUtilityPlugin).default('cursor'),
-    touchAction: ({ addUtilities  })=>{
+    touchAction: ({ addBase , addUtilities  })=>{
+        addBase({
+            '@defaults touch-action': {
+                '--tw-pan-x': 'var(--tw-empty,/*!*/ /*!*/)',
+                '--tw-pan-y': 'var(--tw-empty,/*!*/ /*!*/)',
+                '--tw-pinch-zoom': 'var(--tw-empty,/*!*/ /*!*/)',
+                '--tw-touch-action': 'var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)'
+            }
+        });
         addUtilities({
             '.touch-auto': {
                 'touch-action': 'auto'
@@ -1004,25 +1016,46 @@ let corePlugins1 = {
                 'touch-action': 'none'
             },
             '.touch-pan-x': {
-                'touch-action': 'pan-x'
+                '@defaults touch-action': {
+                },
+                '--tw-pan-x': 'pan-x',
+                'touch-action': 'var(--tw-touch-action)'
             },
             '.touch-pan-left': {
-                'touch-action': 'pan-left'
+                '@defaults touch-action': {
+                },
+                '--tw-pan-x': 'pan-left',
+                'touch-action': 'var(--tw-touch-action)'
             },
             '.touch-pan-right': {
-                'touch-action': 'pan-right'
+                '@defaults touch-action': {
+                },
+                '--tw-pan-x': 'pan-right',
+                'touch-action': 'var(--tw-touch-action)'
             },
             '.touch-pan-y': {
-                'touch-action': 'pan-y'
+                '@defaults touch-action': {
+                },
+                '--tw-pan-y': 'pan-y',
+                'touch-action': 'var(--tw-touch-action)'
             },
             '.touch-pan-up': {
-                'touch-action': 'pan-up'
+                '@defaults touch-action': {
+                },
+                '--tw-pan-y': 'pan-up',
+                'touch-action': 'var(--tw-touch-action)'
             },
             '.touch-pan-down': {
-                'touch-action': 'pan-down'
+                '@defaults touch-action': {
+                },
+                '--tw-pan-y': 'pan-down',
+                'touch-action': 'var(--tw-touch-action)'
             },
             '.touch-pinch-zoom': {
-                'touch-action': 'pinch-zoom'
+                '@defaults touch-action': {
+                },
+                '--tw-pinch-zoom': 'pinch-zoom',
+                'touch-action': 'var(--tw-touch-action)'
             },
             '.touch-manipulation': {
                 'touch-action': 'manipulation'
@@ -2282,6 +2315,12 @@ let corePlugins1 = {
             },
             '.decoration-clone': {
                 'box-decoration-break': 'clone'
+            },
+            '.box-decoration-slice': {
+                'box-decoration-break': 'slice'
+            },
+            '.box-decoration-clone': {
+                'box-decoration-break': 'clone'
             }
         });
     },
@@ -2753,6 +2792,9 @@ let corePlugins1 = {
             '.underline': {
                 'text-decoration': 'underline'
             },
+            '.overline': {
+                'text-decoration': 'overline'
+            },
             '.line-through': {
                 'text-decoration': 'line-through'
             },
@@ -2771,11 +2813,55 @@ let corePlugins1 = {
         }, {
             values: (0, _flattenColorPalette).default(theme('textDecorationColor')),
             type: [
-                'color',
-                'any'
+                'color'
             ]
         });
     },
+    textDecorationStyle: ({ addUtilities  })=>{
+        addUtilities({
+            '.decoration-solid': {
+                'text-decoration-style': 'solid'
+            },
+            '.decoration-double': {
+                'text-decoration-style': 'double'
+            },
+            '.decoration-dotted': {
+                'text-decoration-style': 'dotted'
+            },
+            '.decoration-dashed': {
+                'text-decoration-style': 'dashed'
+            },
+            '.decoration-wavy': {
+                'text-decoration-style': 'wavy'
+            }
+        });
+    },
+    textDecorationThickness: (0, _createUtilityPlugin).default('textDecorationThickness', [
+        [
+            'decoration',
+            [
+                'text-decoration-thickness'
+            ]
+        ]
+    ], {
+        type: [
+            'length',
+            'percentage'
+        ]
+    }),
+    textUnderlineOffset: (0, _createUtilityPlugin).default('textUnderlineOffset', [
+        [
+            'underline-offset',
+            [
+                'text-underline-offset'
+            ]
+        ]
+    ], {
+        type: [
+            'length',
+            'percentage'
+        ]
+    }),
     fontSmoothing: ({ addUtilities  })=>{
         addUtilities({
             '.antialiased': {

package/lib/css/preflight.css

@@ -288,7 +288,8 @@ legend {
 }
 
 ol,
-ul {
+ul,
+menu {
   list-style: none;
   margin: 0;
   padding: 0;

package/lib/lib/expandTailwindAtRules.js

@@ -46,6 +46,8 @@ const PATTERNS = [
     /([^<>"'`\s]*\[\w*\("[^'`\s]*"\)\])/.source,
     /([^<>"'`\s]*\['[^"'`\s]*'\])/.source,
     /([^<>"'`\s]*\["[^"'`\s]*"\])/.source,
+    /([^<>"'`\s]*\[[^<>"'`\s]*:'[^"'`\s]*'\])/.source,
+    /([^<>"'`\s]*\[[^<>"'`\s]*:"[^"'`\s]*"\])/.source,
     /([^<>"'`\s]*\[[^"'`\s]+\][^<>"'`\s]*)/.source,
     /([^<>"'`\s]*[^"'`\s:])/.source
 ].join('|');

package/lib/lib/generateRules.js

@@ -11,6 +11,9 @@ var _prefixSelector = _interopRequireDefault(require("../util/prefixSelector"));
 var _pluginUtils = require("../util/pluginUtils");
 var _log = _interopRequireDefault(require("../util/log"));
 var _formatVariantSelector = require("../util/formatVariantSelector");
+var _nameClass = require("../util/nameClass");
+var _dataTypes = require("../util/dataTypes");
+var _isValidArbitraryValue = _interopRequireDefault(require("../util/isValidArbitraryValue"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -250,6 +253,31 @@ function parseRules(rule, cache, options = {
         options
     ];
 }
+function extractArbitraryProperty(classCandidate, context) {
+    var ref;
+    let [, property, value] = (ref = classCandidate.match(/^\[([a-zA-Z0-9-_]+):(\S+)\]$/)) !== null && ref !== void 0 ? ref : [];
+    if (value === undefined) {
+        return null;
+    }
+    let normalized = (0, _dataTypes).normalize(value);
+    if (!(0, _isValidArbitraryValue).default(normalized)) {
+        return null;
+    }
+    return [
+        [
+            {
+                sort: context.arbitraryPropertiesSort,
+                layer: 'utilities'
+            },
+            ()=>({
+                    [(0, _nameClass).asClass(classCandidate)]: {
+                        [property]: normalized
+                    }
+                })
+            , 
+        ], 
+    ];
+}
 function* resolveMatchedPlugins(classCandidate, context) {
     if (context.candidateRuleMap.has(classCandidate)) {
         yield [
@@ -257,6 +285,14 @@ function* resolveMatchedPlugins(classCandidate, context) {
             'DEFAULT'
         ];
     }
+    yield* (function*(arbitraryPropertyRule) {
+        if (arbitraryPropertyRule !== null) {
+            yield [
+                arbitraryPropertyRule,
+                'DEFAULT'
+            ];
+        }
+    })(extractArbitraryProperty(classCandidate, context));
     let candidatePrefix = classCandidate;
     let negative = false;
     const twConfigPrefix = context.tailwindConfig.prefix;

package/lib/lib/setupContextUtils.js

@@ -23,6 +23,7 @@ var sharedState = _interopRequireWildcard(require("./sharedState"));
 var _toPath = require("../util/toPath");
 var _log = _interopRequireDefault(require("../util/log"));
 var _negateValue = _interopRequireDefault(require("../util/negateValue"));
+var _isValidArbitraryValue = _interopRequireDefault(require("../util/isValidArbitraryValue"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -160,68 +161,6 @@ function withIdentifiers(styles) {
         });
     });
 }
-let matchingBrackets = new Map([
-    [
-        '{',
-        '}'
-    ],
-    [
-        '[',
-        ']'
-    ],
-    [
-        '(',
-        ')'
-    ], 
-]);
-let inverseMatchingBrackets = new Map(Array.from(matchingBrackets.entries()).map(([k, v])=>[
-        v,
-        k
-    ]
-));
-let quotes = new Set([
-    '"',
-    "'",
-    '`'
-]);
-// Arbitrary values must contain balanced brackets (), [] and {}. Escaped
-// values don't count, and brackets inside quotes also don't count.
-//
-// E.g.: w-[this-is]w-[weird-and-invalid]
-// E.g.: w-[this-is\\]w-\\[weird-but-valid]
-// E.g.: content-['this-is-also-valid]-weirdly-enough']
-function isValidArbitraryValue(value) {
-    let stack = [];
-    let inQuotes = false;
-    for(let i = 0; i < value.length; i++){
-        let char = value[i];
-        // Non-escaped quotes allow us to "allow" anything in between
-        if (quotes.has(char) && value[i - 1] !== '\\') {
-            inQuotes = !inQuotes;
-        }
-        if (inQuotes) continue;
-        if (value[i - 1] === '\\') continue; // Escaped
-        if (matchingBrackets.has(char)) {
-            stack.push(char);
-        } else if (inverseMatchingBrackets.has(char)) {
-            let inverse = inverseMatchingBrackets.get(char);
-            // Nothing to pop from, therefore it is unbalanced
-            if (stack.length <= 0) {
-                return false;
-            }
-            // Popped value must match the inverse value, otherwise it is unbalanced
-            if (stack.pop() !== inverse) {
-                return false;
-            }
-        }
-    }
-    // If there is still something on the stack, it is also unbalanced
-    if (stack.length > 0) {
-        return false;
-    }
-    // All good, totally balanced!
-    return true;
-}
 function buildPluginApi(tailwindConfig, context, { variantList , variantMap , offsets , classList  }) {
     function getConfigValue(path, defaultValue) {
         return path ? (0, _dlv).default(tailwindConfig, path, defaultValue) : tailwindConfig;
@@ -409,7 +348,7 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
                     if (!type.includes(coercedType) && !isOnlyPlugin) {
                         return [];
                     }
-                    if (!isValidArbitraryValue(value)) {
+                    if (!(0, _isValidArbitraryValue).default(value)) {
                         return [];
                     }
                     let ruleSets = [].concat(rule(value)).filter(Boolean).map((declaration)=>({
@@ -466,7 +405,7 @@ function buildPluginApi(tailwindConfig, context, { variantList , variantMap , of
                             return [];
                         }
                     }
-                    if (!isValidArbitraryValue(value)) {
+                    if (!(0, _isValidArbitraryValue).default(value)) {
                         return [];
                     }
                     let ruleSets = [].concat(rule(value)).filter(Boolean).map((declaration)=>({
@@ -608,7 +547,8 @@ function resolvePlugins(context, root) {
         _corePlugins.variantPlugins['reducedMotionVariants'],
         _corePlugins.variantPlugins['darkVariants'],
         _corePlugins.variantPlugins['printVariant'],
-        _corePlugins.variantPlugins['screenVariants'], 
+        _corePlugins.variantPlugins['screenVariants'],
+        _corePlugins.variantPlugins['orientationVariants'], 
     ];
     return [
         ...corePluginList,
@@ -652,6 +592,9 @@ function registerPlugins(plugins, context) {
         offsets.user, 
     ]);
     let reservedBits = BigInt(highestOffset.toString(2).length);
+    // A number one less than the top range of the highest offset area
+    // so arbitrary properties are always sorted at the end.
+    context.arbitraryPropertiesSort = (1n << reservedBits << 0n) - 1n;
     context.layerOrder = {
         base: 1n << reservedBits << 0n,
         components: 1n << reservedBits << 1n,

package/lib/util/formatVariantSelector.js

@@ -40,7 +40,16 @@ function formatVariantSelector(current, ...others) {
 function finalizeSelector(format, { selector: selector1 , candidate , context  }) {
     var ref, ref1;
     var ref2;
-    let base = candidate.split((ref2 = context === null || context === void 0 ? void 0 : (ref = context.tailwindConfig) === null || ref === void 0 ? void 0 : ref.separator) !== null && ref2 !== void 0 ? ref2 : ':').pop();
+    let separator = (ref2 = context === null || context === void 0 ? void 0 : (ref = context.tailwindConfig) === null || ref === void 0 ? void 0 : ref.separator) !== null && ref2 !== void 0 ? ref2 : ':';
+    // Split by the separator, but ignore the separator inside square brackets:
+    //
+    // E.g.: dark:lg:hover:[paint-order:markers]
+    //           ┬  ┬     ┬            ┬
+    //           │  │     │            ╰── We will not split here
+    //           ╰──┴─────┴─────────────── We will split here
+    //
+    let splitter = new RegExp(`\\${separator}(?![^[]*\\])`);
+    let base = candidate.split(splitter).pop();
     if (context === null || context === void 0 ? void 0 : (ref1 = context.tailwindConfig) === null || ref1 === void 0 ? void 0 : ref1.prefix) {
         format = (0, _prefixSelector).default(context.tailwindConfig.prefix, format);
     }

package/lib/util/isValidArbitraryValue.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.default = isValidArbitraryValue;
+let matchingBrackets = new Map([
+    [
+        '{',
+        '}'
+    ],
+    [
+        '[',
+        ']'
+    ],
+    [
+        '(',
+        ')'
+    ], 
+]);
+let inverseMatchingBrackets = new Map(Array.from(matchingBrackets.entries()).map(([k, v])=>[
+        v,
+        k
+    ]
+));
+let quotes = new Set([
+    '"',
+    "'",
+    '`'
+]);
+function isValidArbitraryValue(value) {
+    let stack = [];
+    let inQuotes = false;
+    for(let i = 0; i < value.length; i++){
+        let char = value[i];
+        if (char === ':' && !inQuotes && stack.length === 0) {
+            return false;
+        }
+        // Non-escaped quotes allow us to "allow" anything in between
+        if (quotes.has(char) && value[i - 1] !== '\\') {
+            inQuotes = !inQuotes;
+        }
+        if (inQuotes) continue;
+        if (value[i - 1] === '\\') continue; // Escaped
+        if (matchingBrackets.has(char)) {
+            stack.push(char);
+        } else if (inverseMatchingBrackets.has(char)) {
+            let inverse = inverseMatchingBrackets.get(char);
+            // Nothing to pop from, therefore it is unbalanced
+            if (stack.length <= 0) {
+                return false;
+            }
+            // Popped value must match the inverse value, otherwise it is unbalanced
+            if (stack.pop() !== inverse) {
+                return false;
+            }
+        }
+    }
+    // If there is still something on the stack, it is also unbalanced
+    if (stack.length > 0) {
+        return false;
+    }
+    // All good, totally balanced!
+    return true;
+}

package/lib/util/nameClass.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+exports.asClass = asClass;
 exports.default = nameClass;
 exports.formatClass = formatClass;
 var _escapeClassName = _interopRequireDefault(require("./escapeClassName"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "0.0.0-insiders.ef325ea",
+  "version": "0.0.0-insiders.f267d91",
   "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","display","aspectRatio","height","maxHeight","minHeight","width","minWidth","maxWidth","flex","flexShrink","flexGrow","flexBasis","tableLayout","borderCollapse","transformOrigin","translate","rotate","skew","scale","transform","animation","cursor","touchAction","userSelect","resize","scrollSnapType","scrollSnapAlign","scrollSnapStop","scrollMargin","scrollPadding","listStylePosition","listStyleType","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","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","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","display","aspectRatio","height","maxHeight","minHeight","width","minWidth","maxWidth","flex","flexShrink","flexGrow","flexBasis","tableLayout","borderCollapse","transformOrigin","translate","rotate","skew","scale","transform","animation","cursor","touchAction","userSelect","resize","scrollSnapType","scrollSnapAlign","scrollSnapStop","scrollMargin","scrollPadding","listStylePosition","listStyleType","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","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"]

package/src/corePlugins.js

@@ -165,6 +165,11 @@ export let variantPlugins = {
       addVariant(screen.name, `@media ${query}`)
     }
   },
+
+  orientationVariants: ({ addVariant }) => {
+    addVariant('portrait', '@media (orientation: portrait)')
+    addVariant('landscape', '@media (orientation: landscape)')
+  },
 }
 
 export let corePlugins = {
@@ -602,17 +607,54 @@ export let corePlugins = {
 
   cursor: createUtilityPlugin('cursor'),
 
-  touchAction: ({ addUtilities }) => {
+  touchAction: ({ addBase, addUtilities }) => {
+    addBase({
+      '@defaults touch-action': {
+        '--tw-pan-x': 'var(--tw-empty,/*!*/ /*!*/)',
+        '--tw-pan-y': 'var(--tw-empty,/*!*/ /*!*/)',
+        '--tw-pinch-zoom': 'var(--tw-empty,/*!*/ /*!*/)',
+        '--tw-touch-action': 'var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)',
+      },
+    })
+
     addUtilities({
       '.touch-auto': { 'touch-action': 'auto' },
       '.touch-none': { 'touch-action': 'none' },
-      '.touch-pan-x': { 'touch-action': 'pan-x' },
-      '.touch-pan-left': { 'touch-action': 'pan-left' },
-      '.touch-pan-right': { 'touch-action': 'pan-right' },
-      '.touch-pan-y': { 'touch-action': 'pan-y' },
-      '.touch-pan-up': { 'touch-action': 'pan-up' },
-      '.touch-pan-down': { 'touch-action': 'pan-down' },
-      '.touch-pinch-zoom': { 'touch-action': 'pinch-zoom' },
+      '.touch-pan-x': {
+        '@defaults touch-action': {},
+        '--tw-pan-x': 'pan-x',
+        'touch-action': 'var(--tw-touch-action)',
+      },
+      '.touch-pan-left': {
+        '@defaults touch-action': {},
+        '--tw-pan-x': 'pan-left',
+        'touch-action': 'var(--tw-touch-action)',
+      },
+      '.touch-pan-right': {
+        '@defaults touch-action': {},
+        '--tw-pan-x': 'pan-right',
+        'touch-action': 'var(--tw-touch-action)',
+      },
+      '.touch-pan-y': {
+        '@defaults touch-action': {},
+        '--tw-pan-y': 'pan-y',
+        'touch-action': 'var(--tw-touch-action)',
+      },
+      '.touch-pan-up': {
+        '@defaults touch-action': {},
+        '--tw-pan-y': 'pan-up',
+        'touch-action': 'var(--tw-touch-action)',
+      },
+      '.touch-pan-down': {
+        '@defaults touch-action': {},
+        '--tw-pan-y': 'pan-down',
+        'touch-action': 'var(--tw-touch-action)',
+      },
+      '.touch-pinch-zoom': {
+        '@defaults touch-action': {},
+        '--tw-pinch-zoom': 'pinch-zoom',
+        'touch-action': 'var(--tw-touch-action)',
+      },
       '.touch-manipulation': { 'touch-action': 'manipulation' },
     })
   },
@@ -1354,8 +1396,10 @@ export let corePlugins = {
 
   boxDecorationBreak: ({ addUtilities }) => {
     addUtilities({
-      '.decoration-slice': { 'box-decoration-break': 'slice' },
-      '.decoration-clone': { 'box-decoration-break': 'clone' },
+      '.decoration-slice': { 'box-decoration-break': 'slice' }, // Deprecated
+      '.decoration-clone': { 'box-decoration-break': 'clone' }, // Deprecated
+      '.box-decoration-slice': { 'box-decoration-break': 'slice' },
+      '.box-decoration-clone': { 'box-decoration-break': 'clone' },
     })
   },
 
@@ -1613,6 +1657,7 @@ export let corePlugins = {
   textDecoration: ({ addUtilities }) => {
     addUtilities({
       '.underline': { 'text-decoration': 'underline' },
+      '.overline': { 'text-decoration': 'overline' },
       '.line-through': { 'text-decoration': 'line-through' },
       '.no-underline': { 'text-decoration': 'none' },
     })
@@ -1625,10 +1670,32 @@ export let corePlugins = {
           return { 'text-decoration-color': toColorValue(value) }
         },
       },
-      { values: flattenColorPalette(theme('textDecorationColor')), type: ['color', 'any'] }
+      { values: flattenColorPalette(theme('textDecorationColor')), type: ['color'] }
     )
   },
 
+  textDecorationStyle: ({ addUtilities }) => {
+    addUtilities({
+      '.decoration-solid': { 'text-decoration-style': 'solid' },
+      '.decoration-double': { 'text-decoration-style': 'double' },
+      '.decoration-dotted': { 'text-decoration-style': 'dotted' },
+      '.decoration-dashed': { 'text-decoration-style': 'dashed' },
+      '.decoration-wavy': { 'text-decoration-style': 'wavy' },
+    })
+  },
+
+  textDecorationThickness: createUtilityPlugin(
+    'textDecorationThickness',
+    [['decoration', ['text-decoration-thickness']]],
+    { type: ['length', 'percentage'] }
+  ),
+
+  textUnderlineOffset: createUtilityPlugin(
+    'textUnderlineOffset',
+    [['underline-offset', ['text-underline-offset']]],
+    { type: ['length', 'percentage'] }
+  ),
+
   fontSmoothing: ({ addUtilities }) => {
     addUtilities({
       '.antialiased': {

package/src/css/preflight.css

@@ -288,7 +288,8 @@ legend {
 }
 
 ol,
-ul {
+ul,
+menu {
   list-style: none;
   margin: 0;
   padding: 0;

package/src/lib/expandTailwindAtRules.js

@@ -15,6 +15,8 @@ const PATTERNS = [
   /([^<>"'`\s]*\[\w*\("[^'`\s]*"\)\])/.source, // bg-[url("..."),url("...")]
   /([^<>"'`\s]*\['[^"'`\s]*'\])/.source, // `content-['hello']` but not `content-['hello']']`
   /([^<>"'`\s]*\["[^"'`\s]*"\])/.source, // `content-["hello"]` but not `content-["hello"]"]`
+  /([^<>"'`\s]*\[[^<>"'`\s]*:'[^"'`\s]*'\])/.source, // `[content:'hello']` but not `[content:"hello"]`
+  /([^<>"'`\s]*\[[^<>"'`\s]*:"[^"'`\s]*"\])/.source, // `[content:"hello"]` but not `[content:'hello']`
   /([^<>"'`\s]*\[[^"'`\s]+\][^<>"'`\s]*)/.source, // `fill-[#bada55]`, `fill-[#bada55]/50`
   /([^<>"'`\s]*[^"'`\s:])/.source, //  `px-1.5`, `uppercase` but not `uppercase:`
 ].join('|')

package/src/lib/generateRules.js

@@ -6,6 +6,9 @@ import prefixSelector from '../util/prefixSelector'
 import { updateAllClasses } from '../util/pluginUtils'
 import log from '../util/log'
 import { formatVariantSelector, finalizeSelector } from '../util/formatVariantSelector'
+import { asClass } from '../util/nameClass'
+import { normalize } from '../util/dataTypes'
+import isValidArbitraryValue from '../util/isValidArbitraryValue'
 
 let classNameParser = selectorParser((selectors) => {
   return selectors.first.filter(({ type }) => type === 'class').pop().value
@@ -245,11 +248,42 @@ function parseRules(rule, cache, options = {}) {
   return [cache.get(rule), options]
 }
 
+function extractArbitraryProperty(classCandidate, context) {
+  let [, property, value] = classCandidate.match(/^\[([a-zA-Z0-9-_]+):(\S+)\]$/) ?? []
+
+  if (value === undefined) {
+    return null
+  }
+
+  let normalized = normalize(value)
+
+  if (!isValidArbitraryValue(normalized)) {
+    return null
+  }
+
+  return [
+    [
+      { sort: context.arbitraryPropertiesSort, layer: 'utilities' },
+      () => ({
+        [asClass(classCandidate)]: {
+          [property]: normalized,
+        },
+      }),
+    ],
+  ]
+}
+
 function* resolveMatchedPlugins(classCandidate, context) {
   if (context.candidateRuleMap.has(classCandidate)) {
     yield [context.candidateRuleMap.get(classCandidate), 'DEFAULT']
   }
 
+  yield* (function* (arbitraryPropertyRule) {
+    if (arbitraryPropertyRule !== null) {
+      yield [arbitraryPropertyRule, 'DEFAULT']
+    }
+  })(extractArbitraryProperty(classCandidate, context))
+
   let candidatePrefix = classCandidate
   let negative = false
 

package/src/lib/setupContextUtils.js

@@ -18,6 +18,7 @@ import { env } from './sharedState'
 import { toPath } from '../util/toPath'
 import log from '../util/log'
 import negateValue from '../util/negateValue'
+import isValidArbitraryValue from '../util/isValidArbitraryValue'
 
 function parseVariantFormatString(input) {
   if (input.includes('{')) {
@@ -130,64 +131,6 @@ function withIdentifiers(styles) {
   })
 }
 
-let matchingBrackets = new Map([
-  ['{', '}'],
-  ['[', ']'],
-  ['(', ')'],
-])
-let inverseMatchingBrackets = new Map(
-  Array.from(matchingBrackets.entries()).map(([k, v]) => [v, k])
-)
-
-let quotes = new Set(['"', "'", '`'])
-
-// Arbitrary values must contain balanced brackets (), [] and {}. Escaped
-// values don't count, and brackets inside quotes also don't count.
-//
-// E.g.: w-[this-is]w-[weird-and-invalid]
-// E.g.: w-[this-is\\]w-\\[weird-but-valid]
-// E.g.: content-['this-is-also-valid]-weirdly-enough']
-function isValidArbitraryValue(value) {
-  let stack = []
-  let inQuotes = false
-
-  for (let i = 0; i < value.length; i++) {
-    let char = value[i]
-
-    // Non-escaped quotes allow us to "allow" anything in between
-    if (quotes.has(char) && value[i - 1] !== '\\') {
-      inQuotes = !inQuotes
-    }
-
-    if (inQuotes) continue
-    if (value[i - 1] === '\\') continue // Escaped
-
-    if (matchingBrackets.has(char)) {
-      stack.push(char)
-    } else if (inverseMatchingBrackets.has(char)) {
-      let inverse = inverseMatchingBrackets.get(char)
-
-      // Nothing to pop from, therefore it is unbalanced
-      if (stack.length <= 0) {
-        return false
-      }
-
-      // Popped value must match the inverse value, otherwise it is unbalanced
-      if (stack.pop() !== inverse) {
-        return false
-      }
-    }
-  }
-
-  // If there is still something on the stack, it is also unbalanced
-  if (stack.length > 0) {
-    return false
-  }
-
-  // All good, totally balanced!
-  return true
-}
-
 function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offsets, classList }) {
   function getConfigValue(path, defaultValue) {
     return path ? dlv(tailwindConfig, path, defaultValue) : tailwindConfig
@@ -575,6 +518,7 @@ function resolvePlugins(context, root) {
     variantPlugins['darkVariants'],
     variantPlugins['printVariant'],
     variantPlugins['screenVariants'],
+    variantPlugins['orientationVariants'],
   ]
 
   return [...corePluginList, ...beforeVariants, ...userPlugins, ...afterVariants, ...layerPlugins]
@@ -617,6 +561,10 @@ function registerPlugins(plugins, context) {
   ])
   let reservedBits = BigInt(highestOffset.toString(2).length)
 
+  // A number one less than the top range of the highest offset area
+  // so arbitrary properties are always sorted at the end.
+  context.arbitraryPropertiesSort = ((1n << reservedBits) << 0n) - 1n
+
   context.layerOrder = {
     base: (1n << reservedBits) << 0n,
     components: (1n << reservedBits) << 1n,

package/src/util/formatVariantSelector.js

@@ -30,7 +30,17 @@ export function formatVariantSelector(current, ...others) {
 }
 
 export function finalizeSelector(format, { selector, candidate, context }) {
-  let base = candidate.split(context?.tailwindConfig?.separator ?? ':').pop()
+  let separator = context?.tailwindConfig?.separator ?? ':'
+
+  // Split by the separator, but ignore the separator inside square brackets:
+  //
+  // E.g.: dark:lg:hover:[paint-order:markers]
+  //           ┬  ┬     ┬            ┬
+  //           │  │     │            ╰── We will not split here
+  //           ╰──┴─────┴─────────────── We will split here
+  //
+  let splitter = new RegExp(`\\${separator}(?![^[]*\\])`)
+  let base = candidate.split(splitter).pop()
 
   if (context?.tailwindConfig?.prefix) {
     format = prefixSelector(context.tailwindConfig.prefix, format)

package/src/util/isValidArbitraryValue.js

@@ -0,0 +1,61 @@
+let matchingBrackets = new Map([
+  ['{', '}'],
+  ['[', ']'],
+  ['(', ')'],
+])
+let inverseMatchingBrackets = new Map(
+  Array.from(matchingBrackets.entries()).map(([k, v]) => [v, k])
+)
+
+let quotes = new Set(['"', "'", '`'])
+
+// Arbitrary values must contain balanced brackets (), [] and {}. Escaped
+// values don't count, and brackets inside quotes also don't count.
+//
+// E.g.: w-[this-is]w-[weird-and-invalid]
+// E.g.: w-[this-is\\]w-\\[weird-but-valid]
+// E.g.: content-['this-is-also-valid]-weirdly-enough']
+export default function isValidArbitraryValue(value) {
+  let stack = []
+  let inQuotes = false
+
+  for (let i = 0; i < value.length; i++) {
+    let char = value[i]
+
+    if (char === ':' && !inQuotes && stack.length === 0) {
+      return false
+    }
+
+    // Non-escaped quotes allow us to "allow" anything in between
+    if (quotes.has(char) && value[i - 1] !== '\\') {
+      inQuotes = !inQuotes
+    }
+
+    if (inQuotes) continue
+    if (value[i - 1] === '\\') continue // Escaped
+
+    if (matchingBrackets.has(char)) {
+      stack.push(char)
+    } else if (inverseMatchingBrackets.has(char)) {
+      let inverse = inverseMatchingBrackets.get(char)
+
+      // Nothing to pop from, therefore it is unbalanced
+      if (stack.length <= 0) {
+        return false
+      }
+
+      // Popped value must match the inverse value, otherwise it is unbalanced
+      if (stack.pop() !== inverse) {
+        return false
+      }
+    }
+  }
+
+  // If there is still something on the stack, it is also unbalanced
+  if (stack.length > 0) {
+    return false
+  }
+
+  // All good, totally balanced!
+  return true
+}

package/src/util/nameClass.js

@@ -1,7 +1,7 @@
 import escapeClassName from './escapeClassName'
 import escapeCommas from './escapeCommas'
 
-function asClass(name) {
+export function asClass(name) {
   return escapeCommas(`.${escapeClassName(name)}`)
 }
 

package/stubs/defaultConfig.stub.js

@@ -115,6 +115,7 @@ module.exports = {
       auto: 'auto',
       square: '1 / 1',
       video: '16 / 9',
+      attrs: 'attr(width) / attr(height)'
     },
     backdropBlur: ({ theme }) => theme('blur'),
     backdropBrightness: ({ theme }) => theme('brightness'),
@@ -797,6 +798,23 @@ module.exports = {
     },
     textColor: ({ theme }) => theme('colors'),
     textDecorationColor: ({ theme }) => theme('colors'),
+    textDecorationThickness: {
+      auto: 'auto',
+      'from-font': 'from-font',
+      0: '0px',
+      1: '1px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
+    },
+    textUnderlineOffset: {
+      auto: 'auto',
+      0: '0px',
+      1: '1px',
+      2: '2px',
+      4: '4px',
+      8: '8px',
+    },
     textIndent: ({ theme }) => ({
       ...theme('spacing'),
     }),