tailwindcss 3.1.4 → 3.1.5

package/CHANGELOG.md

@@ -9,6 +9,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Nothing yet!
 
+## [3.1.5] - 2022-07-07
+
+### Added
+
+- Support default `font-weight`s in font size utilities ([#8763](https://github.com/tailwindlabs/tailwindcss/pull/8763))
+
+### Fixed
+
+- Allows fallback values in plugin API helpers ([#8762](https://github.com/tailwindlabs/tailwindcss/pull/8762))
+- Fix usage of postcss.config.js in standalone CLI ([#8769](https://github.com/tailwindlabs/tailwindcss/pull/8769))
+- Fix usage of special-character prefixes ([#8772](https://github.com/tailwindlabs/tailwindcss/pull/8772))
+- Don’t prefix selectors in arbitrary variants ([#8773](https://github.com/tailwindlabs/tailwindcss/pull/8773))
+- Add support for alpha values in safe list ([#8774](https://github.com/tailwindlabs/tailwindcss/pull/8774))
+- Add more explicit types for the default theme ([#8780](https://github.com/tailwindlabs/tailwindcss/pull/8780))
+
 ## [3.1.4] - 2022-06-21
 
 ### Fixed
@@ -1989,7 +2004,8 @@ No release notes
 
 - Everything!
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.1.4...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss/compare/v3.1.5...HEAD
+[3.1.5]: https://github.com/tailwindlabs/tailwindcss/compare/v3.1.4...v3.1.5
 [3.1.4]: https://github.com/tailwindlabs/tailwindcss/compare/v3.1.3...v3.1.4
 [3.1.3]: https://github.com/tailwindlabs/tailwindcss/compare/v3.1.2...v3.1.3
 [3.1.2]: https://github.com/tailwindlabs/tailwindcss/compare/v3.1.1...v3.1.2

package/defaultTheme.d.ts

@@ -1,3 +1,4 @@
 import type { Config } from './types/config'
-declare const theme: Config['theme']
+import { DefaultTheme } from './types/generated/default-theme'
+declare const theme: Config['theme'] & DefaultTheme
 export = theme

package/lib/corePlugins.js

@@ -2657,7 +2657,7 @@ let corePlugins = {
                 let [fontSize, options] = Array.isArray(value) ? value : [
                     value
                 ];
-                let { lineHeight , letterSpacing  } = (0, _isPlainObject).default(options) ? options : {
+                let { lineHeight , letterSpacing , fontWeight  } = (0, _isPlainObject).default(options) ? options : {
                     lineHeight: options
                 };
                 return {
@@ -2667,6 +2667,9 @@ let corePlugins = {
                     },
                     ...letterSpacing === undefined ? {} : {
                         "letter-spacing": letterSpacing
+                    },
+                    ...fontWeight === undefined ? {} : {
+                        "font-weight": fontWeight
                     }
                 };
             }

package/lib/lib/defaultExtractor.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.defaultExtractor = defaultExtractor;
-var _featureFlagsJs = require("../featureFlags.js");
+var _featureFlags = require("../featureFlags");
 var regex = _interopRequireWildcard(require("./regex"));
 function _getRequireWildcardCache() {
     if (typeof WeakMap !== "function") return null;
@@ -62,7 +62,11 @@ function defaultExtractor(context) {
 }
 function* buildRegExps(context) {
     let separator = context.tailwindConfig.separator;
-    let variantGroupingEnabled = (0, _featureFlagsJs).flagEnabled(context.tailwindConfig, "variantGrouping");
+    let variantGroupingEnabled = (0, _featureFlags).flagEnabled(context.tailwindConfig, "variantGrouping");
+    let prefix = context.tailwindConfig.prefix !== "" ? regex.optional(regex.pattern([
+        /-?/,
+        regex.escape(context.tailwindConfig.prefix)
+    ])) : "";
     let utility = regex.any([
         // Arbitrary properties
         /\[[^\s:'"`]+:[^\s\]]+\]/,
@@ -125,6 +129,7 @@ function* buildRegExps(context) {
             ")+))\\2)?",
             // Important (optional)
             /!?/,
+            prefix,
             variantGroupingEnabled ? regex.any([
                 // Or any of those things but grouped separated by commas
                 regex.pattern([

package/lib/lib/generateRules.js

@@ -171,6 +171,7 @@ function applyVariant(variant, matches, context) {
         return matches;
     }
     let args;
+    let isArbitraryVariant = false;
     // Find partial arbitrary variants
     if (variant.endsWith("]") && !variant.startsWith("[")) {
         args = variant.slice(variant.lastIndexOf("[") + 1, -1);
@@ -182,6 +183,7 @@ function applyVariant(variant, matches, context) {
         if (!(0, _setupContextUtils).isValidVariantFormatString(selector)) {
             return [];
         }
+        isArbitraryVariant = true;
         let fn = (0, _setupContextUtils).parseVariant(selector);
         let sort = Array.from(context.variantOrder.values()).pop() << 1n;
         context.variantMap.set(variant, [
@@ -329,7 +331,8 @@ function applyVariant(variant, matches, context) {
                     {
                         ...meta,
                         sort: variantSort | meta.sort,
-                        collectedFormats: ((_collectedFormats = meta.collectedFormats) !== null && _collectedFormats !== void 0 ? _collectedFormats : []).concat(collectedFormats)
+                        collectedFormats: ((_collectedFormats = meta.collectedFormats) !== null && _collectedFormats !== void 0 ? _collectedFormats : []).concat(collectedFormats),
+                        isArbitraryVariant
                     },
                     clone.nodes[0], 
                 ];
@@ -639,6 +642,7 @@ function* resolveMatches(candidate, context, original = candidate) {
                         selector: rule.selector,
                         candidate: original,
                         base: candidate.split(new RegExp(`\\${(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(),
+                        isArbitraryVariant: match1[0].isArbitraryVariant,
                         context
                     });
                 });

package/lib/lib/setupContextUtils.js

@@ -747,6 +747,12 @@ function registerPlugins(plugins, context) {
                             ...classes.map((cls)=>cls.slice(0, prefixLength) + "-" + cls.slice(prefixLength)), 
                         ];
                     }
+                    if ([].concat(options === null || options === void 0 ? void 0 : options.type).includes("color")) {
+                        classes = [
+                            ...classes,
+                            ...classes.flatMap((cls)=>Object.keys(context.tailwindConfig.theme.opacity).map((opacity)=>`${cls}/${opacity}`)), 
+                        ];
+                    }
                     return classes;
                 })() : [
                     util

package/lib/util/formatVariantSelector.js

@@ -39,7 +39,7 @@ function formatVariantSelector(current, ...others) {
     return current;
 }
 var ref1;
-function finalizeSelector(format, { selector: selector1 , candidate , context , // Split by the separator, but ignore the separator inside square brackets:
+function finalizeSelector(format, { selector: selector1 , candidate , context , isArbitraryVariant , // Split by the separator, but ignore the separator inside square brackets:
 //
 // E.g.: dark:lg:hover:[paint-order:markers]
 //           ┬  ┬     ┬            ┬
@@ -49,7 +49,8 @@ function finalizeSelector(format, { selector: selector1 , candidate , context ,
 base =candidate.split(new RegExp(`\\${(ref1 = context === null || context === void 0 ? void 0 : (ref = context.tailwindConfig) === null || ref === void 0 ? void 0 : ref.separator) !== null && ref1 !== void 0 ? ref1 : ":"}(?![^[]*\\])`)).pop() ,  }) {
     var ref2;
     let ast = (0, _postcssSelectorParser).default().astSync(selector1);
-    if (context === null || context === void 0 ? void 0 : (ref2 = context.tailwindConfig) === null || ref2 === void 0 ? void 0 : ref2.prefix) {
+    // We explicitly DO NOT prefix classes in arbitrary variants
+    if ((context === null || context === void 0 ? void 0 : (ref2 = context.tailwindConfig) === null || ref2 === void 0 ? void 0 : ref2.prefix) && !isArbitraryVariant) {
         format = (0, _prefixSelector).default(context.tailwindConfig.prefix, format);
     }
     format = format.replace(PARENT, `.${(0, _escapeClassName).default(candidate)}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "3.1.4",
+  "version": "3.1.5",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -47,12 +47,12 @@
     "@swc/jest": "^0.2.21",
     "@swc/register": "^0.1.10",
     "autoprefixer": "^10.4.7",
-    "cssnano": "^5.1.11",
-    "esbuild": "^0.14.43",
-    "eslint": "^8.16.0",
+    "cssnano": "^5.1.12",
+    "esbuild": "^0.14.48",
+    "eslint": "^8.18.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "jest": "^28.1.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "jest": "^28.1.2",
     "jest-diff": "^28.1.1",
     "prettier": "^2.7.1",
     "prettier-plugin-tailwindcss": "^0.1.11",
@@ -79,12 +79,12 @@
     "postcss": "^8.4.14",
     "postcss-import": "^14.1.0",
     "postcss-js": "^4.0.0",
-    "postcss-load-config": "^3.1.4",
+    "postcss-load-config": "^4.0.1",
     "postcss-nested": "5.0.6",
     "postcss-selector-parser": "^6.0.10",
     "postcss-value-parser": "^4.2.0",
     "quick-lru": "^5.1.1",
-    "resolve": "^1.22.0"
+    "resolve": "^1.22.1"
   },
   "browserslist": [
     "> 1%",

package/peers/index.js

@@ -5978,6 +5978,7 @@ var require_core = __commonJS({
       "node:string_decoder": [">= 14.18 && < 15", ">= 16"],
       sys: [">= 0.4 && < 0.7", ">= 0.8"],
       "node:sys": [">= 14.18 && < 15", ">= 16"],
+      "node:test": ">= 18",
       timers: true,
       "node:timers": [">= 14.18 && < 15", ">= 16"],
       "timers/promises": ">= 15",
@@ -6092,7 +6093,7 @@ var require_async = __commonJS({
     var nodeModulesPaths = require_node_modules_paths();
     var normalizeOptions = require_normalize_options();
     var isCore = require_is_core_module();
-    var realpathFS = fs.realpath && typeof fs.realpath.native === "function" ? fs.realpath.native : fs.realpath;
+    var realpathFS = process.platform !== "win32" && fs.realpath && typeof fs.realpath.native === "function" ? fs.realpath.native : fs.realpath;
     var homedir = getHomedir();
     var defaultPaths = function() {
       return [
@@ -6525,6 +6526,7 @@ var require_core2 = __commonJS({
       "node:string_decoder": [">= 14.18 && < 15", ">= 16"],
       sys: [">= 0.4 && < 0.7", ">= 0.8"],
       "node:sys": [">= 14.18 && < 15", ">= 16"],
+      "node:test": ">= 18",
       timers: true,
       "node:timers": [">= 14.18 && < 15", ">= 16"],
       "timers/promises": ">= 15",
@@ -6647,7 +6649,7 @@ var require_sync = __commonJS({
     var caller = require_caller();
     var nodeModulesPaths = require_node_modules_paths();
     var normalizeOptions = require_normalize_options();
-    var realpathFS = fs.realpathSync && typeof fs.realpathSync.native === "function" ? fs.realpathSync.native : fs.realpathSync;
+    var realpathFS = process.platform !== "win32" && fs.realpathSync && typeof fs.realpathSync.native === "function" ? fs.realpathSync.native : fs.realpathSync;
     var homedir = getHomedir();
     var defaultPaths = function() {
       return [
@@ -73369,11 +73371,12 @@ var require_src11 = __commonJS({
       ...grid,
       ...columnRules
     ]);
+    var variableFunctions = /* @__PURE__ */ new Set(["var", "env", "constant"]);
     function isVariableFunctionNode(node) {
       if (node.type !== "function") {
         return false;
       }
-      return ["var", "env", "constant"].includes(node.value.toLowerCase());
+      return variableFunctions.has(node.value.toLowerCase());
     }
     function shouldAbort(parsed) {
       let abort = false;
@@ -75319,7 +75322,7 @@ var require_parseWsc = __commonJS({
     var { list } = require_postcss();
     var { isWidth, isStyle, isColor } = require_validateWsc();
     var none = /^\s*(none|medium)(\s+none(\s+(none|currentcolor))?)?\s*$/i;
-    var varRE = /--(\w|[^\x00-\x7F])+/g;
+    var varRE = /--(\w|-|[^\x00-\x7F])+/g;
     var toLower = (v) => {
       let match;
       let lastIndex = 0;
@@ -76402,11 +76405,12 @@ var require_src21 = __commonJS({
     function isCommaNode(node) {
       return node.type === "div" && node.value === ",";
     }
+    var variableFunctions = /* @__PURE__ */ new Set(["var", "env", "constant"]);
     function isVariableFunctionNode(node) {
       if (node.type !== "function") {
         return false;
       }
-      return ["var", "env"].includes(node.value.toLowerCase());
+      return variableFunctions.has(node.value.toLowerCase());
     }
     function transform(value) {
       const parsed = valueParser(value);
@@ -77216,6 +77220,7 @@ var require_src26 = __commonJS({
       ["top", "0"]
     ]);
     var mathFunctions = /* @__PURE__ */ new Set(["calc", "min", "max", "clamp"]);
+    var variableFunctions = /* @__PURE__ */ new Set(["var", "env", "constant"]);
     function isCommaNode(node) {
       return node.type === "div" && node.value === ",";
     }
@@ -77223,7 +77228,7 @@ var require_src26 = __commonJS({
       if (node.type !== "function") {
         return false;
       }
-      return ["var", "env"].includes(node.value.toLowerCase());
+      return variableFunctions.has(node.value.toLowerCase());
     }
     function isMathFunctionNode(node) {
       if (node.type !== "function") {

package/scripts/generate-types.js

@@ -1,8 +1,10 @@
 import prettier from 'prettier'
 import { corePlugins } from '../src/corePlugins'
 import colors from '../src/public/colors'
+import defaultTheme from '../src/public/default-theme'
 import fs from 'fs'
 import path from 'path'
+import * as types from './type-utils'
 
 fs.writeFileSync(
   path.join(process.cwd(), 'types', 'generated', 'corePluginList.d.ts'),
@@ -50,3 +52,54 @@ fs.writeFileSync(
     }
   )
 )
+
+const defaultThemeTypes = Object.entries(defaultTheme)
+  .map(([name, value]) => {
+    // Special cases for slightly more accurate types
+    if (name === 'keyframes') {
+      return [name, `Record<${types.forKeys(value)}, Record<string, CSSDeclarationList>>`]
+    }
+
+    if (name === 'fontSize') {
+      return [name, `Record<${types.forKeys(value)}, [string, { lineHeight: string }]>`]
+    }
+
+    // General cases
+    if (typeof value === 'string') {
+      return [name, `string`]
+    }
+
+    if (typeof value === 'function') {
+      return [name, null]
+    }
+
+    if (typeof value === 'object') {
+      if (Object.keys(value).length === 0) {
+        return [name, null]
+      }
+
+      return [name, types.forValue(value)]
+    }
+
+    return [name, `unknown`]
+  })
+  .filter(([, type]) => type !== null)
+  .map(([name, type]) => `${name}: ${type}`)
+  .join('\n')
+
+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} }
+  `,
+    {
+      semi: false,
+      singleQuote: true,
+      printWidth: 100,
+      parser: 'typescript',
+    }
+  )
+)

package/scripts/type-utils.js

@@ -0,0 +1,27 @@
+export function union(types) {
+  return [...new Set(types)].join(' | ')
+}
+
+export function unionValues(values) {
+  return union(values.map(forValue))
+}
+
+export function forKeys(value) {
+  return union(Object.keys(value).map((key) => `'${key}'`))
+}
+
+export function forValue(value) {
+  if (Array.isArray(value)) {
+    return `(${unionValues(value)})[]`
+  }
+
+  if (typeof value === 'object') {
+    return `Record<${forKeys(value)}, ${unionValues(Object.values(value))}>`
+  }
+
+  if (typeof value === 'string') {
+    return `string`
+  }
+
+  return `any`
+}

package/src/corePlugins.js

@@ -1613,7 +1613,7 @@ export let corePlugins = {
       {
         text: (value) => {
           let [fontSize, options] = Array.isArray(value) ? value : [value]
-          let { lineHeight, letterSpacing } = isPlainObject(options)
+          let { lineHeight, letterSpacing, fontWeight } = isPlainObject(options)
             ? options
             : { lineHeight: options }
 
@@ -1621,6 +1621,7 @@ export let corePlugins = {
             'font-size': fontSize,
             ...(lineHeight === undefined ? {} : { 'line-height': lineHeight }),
             ...(letterSpacing === undefined ? {} : { 'letter-spacing': letterSpacing }),
+            ...(fontWeight === undefined ? {} : { 'font-weight': fontWeight }),
           }
         },
       },

package/src/lib/defaultExtractor.js

@@ -1,4 +1,4 @@
-import { flagEnabled } from '../featureFlags.js'
+import { flagEnabled } from '../featureFlags'
 import * as regex from './regex'
 
 export function defaultExtractor(context) {
@@ -22,6 +22,10 @@ export function defaultExtractor(context) {
 function* buildRegExps(context) {
   let separator = context.tailwindConfig.separator
   let variantGroupingEnabled = flagEnabled(context.tailwindConfig, 'variantGrouping')
+  let prefix =
+    context.tailwindConfig.prefix !== ''
+      ? regex.optional(regex.pattern([/-?/, regex.escape(context.tailwindConfig.prefix)]))
+      : ''
 
   let utility = regex.any([
     // Arbitrary properties
@@ -88,6 +92,8 @@ function* buildRegExps(context) {
       // Important (optional)
       /!?/,
 
+      prefix,
+
       variantGroupingEnabled
         ? regex.any([
             // Or any of those things but grouped separated by commas

package/src/lib/generateRules.js

@@ -129,6 +129,7 @@ function applyVariant(variant, matches, context) {
   }
 
   let args
+  let isArbitraryVariant = false
 
   // Find partial arbitrary variants
   if (variant.endsWith(']') && !variant.startsWith('[')) {
@@ -144,6 +145,8 @@ function applyVariant(variant, matches, context) {
       return []
     }
 
+    isArbitraryVariant = true
+
     let fn = parseVariant(selector)
 
     let sort = Array.from(context.variantOrder.values()).pop() << 1n
@@ -300,6 +303,7 @@ function applyVariant(variant, matches, context) {
             ...meta,
             sort: variantSort | meta.sort,
             collectedFormats: (meta.collectedFormats ?? []).concat(collectedFormats),
+            isArbitraryVariant,
           },
           clone.nodes[0],
         ]
@@ -627,6 +631,7 @@ function* resolveMatches(candidate, context, original = candidate) {
             base: candidate
               .split(new RegExp(`\\${context?.tailwindConfig?.separator ?? ':'}(?![^[]*\\])`))
               .pop(),
+            isArbitraryVariant: match[0].isArbitraryVariant,
 
             context,
           })

package/src/lib/setupContextUtils.js

@@ -762,6 +762,17 @@ function registerPlugins(plugins, context) {
                 ]
               }
 
+              if ([].concat(options?.type).includes('color')) {
+                classes = [
+                  ...classes,
+                  ...classes.flatMap((cls) =>
+                    Object.keys(context.tailwindConfig.theme.opacity).map(
+                      (opacity) => `${cls}/${opacity}`
+                    )
+                  ),
+                ]
+              }
+
               return classes
             })()
           : [util]

package/src/util/formatVariantSelector.js

@@ -35,6 +35,7 @@ export function finalizeSelector(
     selector,
     candidate,
     context,
+    isArbitraryVariant,
 
     // Split by the separator, but ignore the separator inside square brackets:
     //
@@ -50,7 +51,8 @@ export function finalizeSelector(
 ) {
   let ast = selectorParser().astSync(selector)
 
-  if (context?.tailwindConfig?.prefix) {
+  // We explicitly DO NOT prefix classes in arbitrary variants
+  if (context?.tailwindConfig?.prefix && !isArbitraryVariant) {
     format = prefixSelector(context.tailwindConfig.prefix, format)
   }
 

package/types/config.d.ts

@@ -12,6 +12,7 @@ interface RecursiveKeyValuePair<K extends keyof any = string, V = string> {
   [key: string]: V | RecursiveKeyValuePair<K, V>
 }
 type ResolvableTo<T> = T | ((utils: PluginUtils) => T)
+type CSSRuleObject = RecursiveKeyValuePair<string, string | string[]>
 
 interface PluginUtils {
   colors: DefaultColors
@@ -163,6 +164,7 @@ interface ThemeConfig {
           configuration: Partial<{
             lineHeight: string
             letterSpacing: string
+            fontWeight: string | number
           }>
         ]
     >
@@ -242,7 +244,7 @@ type ValueType =
 export interface PluginAPI {
   // for registering new static utility styles
   addUtilities(
-    utilities: RecursiveKeyValuePair | RecursiveKeyValuePair[],
+    utilities: CSSRuleObject | CSSRuleObject[],
     options?: Partial<{
       respectPrefix: boolean
       respectImportant: boolean
@@ -250,7 +252,7 @@ export interface PluginAPI {
   ): void
   // for registering new dynamic utility styles
   matchUtilities<T>(
-    utilities: KeyValuePair<string, (value: T) => RecursiveKeyValuePair>,
+    utilities: KeyValuePair<string, (value: T) => CSSRuleObject>,
     options?: Partial<{
       respectPrefix: boolean
       respectImportant: boolean
@@ -261,7 +263,7 @@ export interface PluginAPI {
   ): void
   // for registering new static component styles
   addComponents(
-    components: RecursiveKeyValuePair | RecursiveKeyValuePair[],
+    components: CSSRuleObject | CSSRuleObject[],
     options?: Partial<{
       respectPrefix: boolean
       respectImportant: boolean
@@ -269,7 +271,7 @@ export interface PluginAPI {
   ): void
   // for registering new dynamic component styles
   matchComponents<T>(
-    components: KeyValuePair<string, (value: T) => RecursiveKeyValuePair>,
+    components: KeyValuePair<string, (value: T) => CSSRuleObject>,
     options?: Partial<{
       respectPrefix: boolean
       respectImportant: boolean
@@ -279,7 +281,7 @@ export interface PluginAPI {
     }>
   ): void
   // for registering new base styles
-  addBase(base: RecursiveKeyValuePair | RecursiveKeyValuePair[]): void
+  addBase(base: CSSRuleObject | CSSRuleObject[]): void
   // for registering custom variants
   addVariant(name: string, definition: string | string[] | (() => string) | (() => string)[]): void
   // for looking up values in the user’s theme configuration

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

@@ -0,0 +1,331 @@
+import { Config } from '../../types'
+type CSSDeclarationList = Record<string, string>
+export type DefaultTheme = Config['theme'] & {
+  screens: Record<'sm' | 'md' | 'lg' | 'xl' | '2xl', string>
+  columns: Record<
+    | '1'
+    | '2'
+    | '3'
+    | '4'
+    | '5'
+    | '6'
+    | '7'
+    | '8'
+    | '9'
+    | '10'
+    | '11'
+    | '12'
+    | 'auto'
+    | '3xs'
+    | '2xs'
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl'
+    | '2xl'
+    | '3xl'
+    | '4xl'
+    | '5xl'
+    | '6xl'
+    | '7xl',
+    string
+  >
+  spacing: Record<
+    | '0'
+    | '1'
+    | '2'
+    | '3'
+    | '4'
+    | '5'
+    | '6'
+    | '7'
+    | '8'
+    | '9'
+    | '10'
+    | '11'
+    | '12'
+    | '14'
+    | '16'
+    | '20'
+    | '24'
+    | '28'
+    | '32'
+    | '36'
+    | '40'
+    | '44'
+    | '48'
+    | '52'
+    | '56'
+    | '60'
+    | '64'
+    | '72'
+    | '80'
+    | '96'
+    | 'px'
+    | '0.5'
+    | '1.5'
+    | '2.5'
+    | '3.5',
+    string
+  >
+  animation: Record<'none' | 'spin' | 'ping' | 'pulse' | 'bounce', string>
+  aspectRatio: Record<'auto' | 'square' | 'video', string>
+  backgroundImage: Record<
+    | 'none'
+    | 'gradient-to-t'
+    | 'gradient-to-tr'
+    | 'gradient-to-r'
+    | 'gradient-to-br'
+    | 'gradient-to-b'
+    | 'gradient-to-bl'
+    | 'gradient-to-l'
+    | 'gradient-to-tl',
+    string
+  >
+  backgroundPosition: Record<
+    | 'bottom'
+    | 'center'
+    | 'left'
+    | 'left-bottom'
+    | 'left-top'
+    | 'right'
+    | 'right-bottom'
+    | 'right-top'
+    | 'top',
+    string
+  >
+  backgroundSize: Record<'auto' | 'cover' | 'contain', string>
+  blur: Record<'0' | 'none' | 'sm' | 'DEFAULT' | 'md' | 'lg' | 'xl' | '2xl' | '3xl', string>
+  brightness: Record<
+    '0' | '50' | '75' | '90' | '95' | '100' | '105' | '110' | '125' | '150' | '200',
+    string
+  >
+  borderRadius: Record<
+    'none' | 'sm' | 'DEFAULT' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full',
+    string
+  >
+  borderWidth: Record<'0' | '2' | '4' | '8' | 'DEFAULT', string>
+  boxShadow: Record<'sm' | 'DEFAULT' | 'md' | 'lg' | 'xl' | '2xl' | 'inner' | 'none', string>
+  contrast: Record<'0' | '50' | '75' | '100' | '125' | '150' | '200', string>
+  content: Record<'none', string>
+  cursor: Record<
+    | 'auto'
+    | 'default'
+    | 'pointer'
+    | 'wait'
+    | 'text'
+    | 'move'
+    | 'help'
+    | 'not-allowed'
+    | 'none'
+    | 'context-menu'
+    | 'progress'
+    | 'cell'
+    | 'crosshair'
+    | 'vertical-text'
+    | 'alias'
+    | 'copy'
+    | 'no-drop'
+    | 'grab'
+    | 'grabbing'
+    | 'all-scroll'
+    | 'col-resize'
+    | 'row-resize'
+    | 'n-resize'
+    | 'e-resize'
+    | 's-resize'
+    | 'w-resize'
+    | 'ne-resize'
+    | 'nw-resize'
+    | 'se-resize'
+    | 'sw-resize'
+    | 'ew-resize'
+    | 'ns-resize'
+    | 'nesw-resize'
+    | 'nwse-resize'
+    | 'zoom-in'
+    | 'zoom-out',
+    string
+  >
+  dropShadow: Record<'sm' | 'DEFAULT' | 'md' | 'lg' | 'xl' | '2xl' | 'none', string | string[]>
+  grayscale: Record<'0' | 'DEFAULT', string>
+  hueRotate: Record<'0' | '15' | '30' | '60' | '90' | '180', string>
+  invert: Record<'0' | 'DEFAULT', string>
+  flex: Record<'1' | 'auto' | 'initial' | 'none', string>
+  flexGrow: Record<'0' | 'DEFAULT', string>
+  flexShrink: Record<'0' | 'DEFAULT', string>
+  fontFamily: Record<'sans' | 'serif' | 'mono', string[]>
+  fontSize: Record<
+    | 'xs'
+    | 'sm'
+    | 'base'
+    | 'lg'
+    | 'xl'
+    | '2xl'
+    | '3xl'
+    | '4xl'
+    | '5xl'
+    | '6xl'
+    | '7xl'
+    | '8xl'
+    | '9xl',
+    [string, { lineHeight: string }]
+  >
+  fontWeight: Record<
+    | 'thin'
+    | 'extralight'
+    | 'light'
+    | 'normal'
+    | 'medium'
+    | 'semibold'
+    | 'bold'
+    | 'extrabold'
+    | 'black',
+    string
+  >
+  gridAutoColumns: Record<'auto' | 'min' | 'max' | 'fr', string>
+  gridAutoRows: Record<'auto' | 'min' | 'max' | 'fr', string>
+  gridColumn: Record<
+    | '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
+  >
+  gridColumnEnd: Record<
+    '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | '13' | 'auto',
+    string
+  >
+  gridColumnStart: Record<
+    '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | '13' | 'auto',
+    string
+  >
+  gridRow: Record<
+    'auto' | 'span-1' | 'span-2' | 'span-3' | 'span-4' | 'span-5' | 'span-6' | 'span-full',
+    string
+  >
+  gridRowStart: Record<'1' | '2' | '3' | '4' | '5' | '6' | '7' | 'auto', string>
+  gridRowEnd: 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',
+    string
+  >
+  gridTemplateRows: Record<'1' | '2' | '3' | '4' | '5' | '6' | 'none', string>
+  keyframes: Record<'spin' | 'ping' | 'pulse' | 'bounce', Record<string, CSSDeclarationList>>
+  letterSpacing: Record<'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest', string>
+  lineHeight: Record<
+    | '3'
+    | '4'
+    | '5'
+    | '6'
+    | '7'
+    | '8'
+    | '9'
+    | '10'
+    | 'none'
+    | 'tight'
+    | 'snug'
+    | 'normal'
+    | 'relaxed'
+    | 'loose',
+    string
+  >
+  listStyleType: Record<'none' | 'disc' | 'decimal', string>
+  minHeight: Record<'0' | 'full' | 'screen' | 'min' | 'max' | 'fit', string>
+  minWidth: Record<'0' | 'full' | 'min' | 'max' | 'fit', string>
+  objectPosition: Record<
+    | 'bottom'
+    | 'center'
+    | 'left'
+    | 'left-bottom'
+    | 'left-top'
+    | 'right'
+    | 'right-bottom'
+    | 'right-top'
+    | 'top',
+    string
+  >
+  opacity: Record<
+    | '0'
+    | '5'
+    | '10'
+    | '20'
+    | '25'
+    | '30'
+    | '40'
+    | '50'
+    | '60'
+    | '70'
+    | '75'
+    | '80'
+    | '90'
+    | '95'
+    | '100',
+    string
+  >
+  order: Record<
+    | '1'
+    | '2'
+    | '3'
+    | '4'
+    | '5'
+    | '6'
+    | '7'
+    | '8'
+    | '9'
+    | '10'
+    | '11'
+    | '12'
+    | 'first'
+    | 'last'
+    | 'none',
+    string
+  >
+  outlineOffset: Record<'0' | '1' | '2' | '4' | '8', string>
+  outlineWidth: Record<'0' | '1' | '2' | '4' | '8', string>
+  ringOffsetWidth: Record<'0' | '1' | '2' | '4' | '8', string>
+  ringWidth: Record<'0' | '1' | '2' | '4' | '8' | 'DEFAULT', string>
+  rotate: Record<'0' | '1' | '2' | '3' | '6' | '12' | '45' | '90' | '180', string>
+  saturate: Record<'0' | '50' | '100' | '150' | '200', string>
+  scale: Record<'0' | '50' | '75' | '90' | '95' | '100' | '105' | '110' | '125' | '150', string>
+  sepia: Record<'0' | 'DEFAULT', string>
+  skew: Record<'0' | '1' | '2' | '3' | '6' | '12', string>
+  strokeWidth: Record<'0' | '1' | '2', string>
+  textDecorationThickness: Record<'0' | '1' | '2' | '4' | '8' | 'auto' | 'from-font', string>
+  textUnderlineOffset: Record<'0' | '1' | '2' | '4' | '8' | 'auto', string>
+  transformOrigin: Record<
+    | 'center'
+    | 'top'
+    | 'top-right'
+    | 'right'
+    | 'bottom-right'
+    | 'bottom'
+    | 'bottom-left'
+    | 'left'
+    | 'top-left',
+    string
+  >
+  transitionDelay: Record<'75' | '100' | '150' | '200' | '300' | '500' | '700' | '1000', string>
+  transitionDuration: Record<
+    '75' | '100' | '150' | '200' | '300' | '500' | '700' | '1000' | 'DEFAULT',
+    string
+  >
+  transitionProperty: Record<
+    'none' | 'all' | 'DEFAULT' | 'colors' | 'opacity' | 'shadow' | 'transform',
+    string
+  >
+  transitionTimingFunction: Record<'DEFAULT' | 'linear' | 'in' | 'out' | 'in-out', string>
+  willChange: Record<'auto' | 'scroll' | 'contents' | 'transform', string>
+  zIndex: Record<'0' | '10' | '20' | '30' | '40' | '50' | 'auto', string>
+}