tailwindcss 0.0.0-insiders.d3e754a → 0.0.0-insiders.d3f2221

package/types/config.d.ts

@@ -0,0 +1,369 @@
+import type { CorePluginList } from './generated/corePluginList'
+import type { DefaultColors } from './generated/colors'
+
+// Helpers
+type Expand<T> = T extends object
+  ? T extends infer O
+    ? { [K in keyof O]: Expand<O[K]> }
+    : never
+  : T
+type KeyValuePair<K extends keyof any = string, V = string> = Record<K, V>
+interface RecursiveKeyValuePair<K extends keyof any = string, V = string> {
+  [key: string]: V | RecursiveKeyValuePair<K, V>
+}
+export type ResolvableTo<T> = T | ((utils: PluginUtils) => T)
+type CSSRuleObject = RecursiveKeyValuePair<string, null | string | string[]>
+
+interface PluginUtils {
+  colors: DefaultColors
+  theme(path: string, defaultValue?: unknown): any
+  breakpoints<I = Record<string, unknown>, O = I>(arg: I): O
+  rgb(arg: string): (arg: Partial<{ opacityVariable: string; opacityValue: number }>) => string
+  hsl(arg: string): (arg: Partial<{ opacityVariable: string; opacityValue: number }>) => string
+}
+
+// Content related config
+type FilePath = string
+type RawFile = { raw: string; extension?: string }
+type ExtractorFn = (content: string) => string[]
+type TransformerFn = (content: string) => string
+type ContentConfig =
+  | (FilePath | RawFile)[]
+  | {
+      files: (FilePath | RawFile)[]
+      relative?: boolean
+      extract?: ExtractorFn | { [extension: string]: ExtractorFn }
+      transform?: TransformerFn | { [extension: string]: TransformerFn }
+    }
+
+// Important related config
+type ImportantConfig = boolean | string
+
+// Prefix related config
+type PrefixConfig = string
+
+// Separator related config
+type SeparatorConfig = string
+
+// Safelist related config
+type SafelistConfig = string | { pattern: RegExp; variants?: string[] }
+
+// Blocklist related config
+type BlocklistConfig = string
+
+// Presets related config
+type PresetsConfig = Partial<Config>
+
+// Future related config
+type FutureConfigValues =
+  | 'hoverOnlyWhenSupported'
+  | 'respectDefaultRingColorOpacity'
+  | 'disableColorOpacityUtilitiesByDefault'
+  | 'relativeContentPathsByDefault'
+  | 'logicalSiblingUtilities'
+type FutureConfig = Expand<'all' | Partial<Record<FutureConfigValues, boolean>>> | []
+
+// Experimental related config
+type ExperimentalConfigValues = 'optimizeUniversalDefaults' | 'oxideParser'
+type ExperimentalConfig = Expand<'all' | Partial<Record<ExperimentalConfigValues, boolean>>> | []
+
+// DarkMode related config
+type DarkModeConfig =
+  // Use the `media` query strategy.
+  | 'media'
+  // Use the `class` strategy, which requires a `.dark` class on the `html`.
+  | 'class'
+  // Use the `class` strategy with a custom class instead of `.dark`.
+  | ['class', string]
+
+type Screen = { raw: string } | { min: string } | { max: string } | { min: string; max: string }
+type ScreensConfig = string[] | KeyValuePair<string, string | Screen | Screen[]>
+
+// Theme related config
+interface ThemeConfig {
+  // Responsiveness
+  screens: ResolvableTo<ScreensConfig>
+  supports: ResolvableTo<Record<string, string>>
+  data: ResolvableTo<Record<string, string>>
+
+  // Reusable base configs
+  colors: ResolvableTo<RecursiveKeyValuePair>
+  spacing: ResolvableTo<KeyValuePair>
+
+  // Components
+  container: ResolvableTo<
+    Partial<{
+      screens: ScreensConfig
+      center: boolean
+      padding: string | Record<string, string>
+    }>
+  >
+
+  // Utilities
+  inset: ThemeConfig['spacing']
+  zIndex: ResolvableTo<KeyValuePair>
+  order: ResolvableTo<KeyValuePair>
+  gridColumn: ResolvableTo<KeyValuePair>
+  gridColumnStart: ResolvableTo<KeyValuePair>
+  gridColumnEnd: ResolvableTo<KeyValuePair>
+  gridRow: ResolvableTo<KeyValuePair>
+  gridRowStart: ResolvableTo<KeyValuePair>
+  gridRowEnd: ResolvableTo<KeyValuePair>
+  margin: ThemeConfig['spacing']
+  aspectRatio: ResolvableTo<KeyValuePair>
+  height: ThemeConfig['spacing']
+  maxHeight: ThemeConfig['spacing']
+  minHeight: ResolvableTo<KeyValuePair>
+  width: ThemeConfig['spacing']
+  maxWidth: ResolvableTo<KeyValuePair>
+  minWidth: ResolvableTo<KeyValuePair>
+  flex: ResolvableTo<KeyValuePair>
+  flexShrink: ResolvableTo<KeyValuePair>
+  flexGrow: ResolvableTo<KeyValuePair>
+  flexBasis: ThemeConfig['spacing']
+  borderSpacing: ThemeConfig['spacing']
+  transformOrigin: ResolvableTo<KeyValuePair>
+  translate: ThemeConfig['spacing']
+  rotate: ResolvableTo<KeyValuePair>
+  skew: ResolvableTo<KeyValuePair>
+  scale: ResolvableTo<KeyValuePair>
+  animation: ResolvableTo<KeyValuePair>
+  keyframes: ResolvableTo<KeyValuePair<string, KeyValuePair<string, KeyValuePair>>>
+  cursor: ResolvableTo<KeyValuePair>
+  scrollMargin: ThemeConfig['spacing']
+  scrollPadding: ThemeConfig['spacing']
+  listStyleType: ResolvableTo<KeyValuePair>
+  columns: ResolvableTo<KeyValuePair>
+  gridAutoColumns: ResolvableTo<KeyValuePair>
+  gridAutoRows: ResolvableTo<KeyValuePair>
+  gridTemplateColumns: ResolvableTo<KeyValuePair>
+  gridTemplateRows: ResolvableTo<KeyValuePair>
+  gap: ThemeConfig['spacing']
+  space: ThemeConfig['spacing']
+  divideWidth: ThemeConfig['borderWidth']
+  divideColor: ThemeConfig['borderColor']
+  divideOpacity: ThemeConfig['borderOpacity']
+  borderRadius: ResolvableTo<KeyValuePair>
+  borderWidth: ResolvableTo<KeyValuePair>
+  borderColor: ThemeConfig['colors']
+  borderOpacity: ThemeConfig['opacity']
+  backgroundColor: ThemeConfig['colors']
+  backgroundOpacity: ThemeConfig['opacity']
+  backgroundImage: ResolvableTo<KeyValuePair>
+  gradientColorStops: ThemeConfig['colors']
+  backgroundSize: ResolvableTo<KeyValuePair>
+  backgroundPosition: ResolvableTo<KeyValuePair>
+  fill: ThemeConfig['colors']
+  stroke: ThemeConfig['colors']
+  strokeWidth: ResolvableTo<KeyValuePair>
+  objectPosition: ResolvableTo<KeyValuePair>
+  padding: ThemeConfig['spacing']
+  textIndent: ThemeConfig['spacing']
+  fontFamily: ResolvableTo<
+    KeyValuePair<
+      string,
+      | string
+      | string[]
+      | [
+          fontFamily: string | string[],
+          configuration: Partial<{
+            fontFeatureSettings: string
+            fontVariationSettings: string
+          }>
+        ]
+    >
+  >
+  fontSize: ResolvableTo<
+    KeyValuePair<
+      string,
+      | string
+      | [fontSize: string, lineHeight: string]
+      | [
+          fontSize: string,
+          configuration: Partial<{
+            lineHeight: string
+            letterSpacing: string
+            fontWeight: string | number
+          }>
+        ]
+    >
+  >
+  fontWeight: ResolvableTo<KeyValuePair>
+  lineHeight: ResolvableTo<KeyValuePair>
+  letterSpacing: ResolvableTo<KeyValuePair>
+  textColor: ThemeConfig['colors']
+  textOpacity: ThemeConfig['opacity']
+  textDecorationColor: ThemeConfig['colors']
+  textDecorationThickness: ResolvableTo<KeyValuePair>
+  textUnderlineOffset: ResolvableTo<KeyValuePair>
+  placeholderColor: ThemeConfig['colors']
+  placeholderOpacity: ThemeConfig['opacity']
+  caretColor: ThemeConfig['colors']
+  accentColor: ThemeConfig['colors']
+  opacity: ResolvableTo<KeyValuePair>
+  boxShadow: ResolvableTo<KeyValuePair>
+  boxShadowColor: ThemeConfig['colors']
+  outlineWidth: ResolvableTo<KeyValuePair>
+  outlineOffset: ResolvableTo<KeyValuePair>
+  outlineColor: ThemeConfig['colors']
+  ringWidth: ResolvableTo<KeyValuePair>
+  ringColor: ThemeConfig['colors']
+  ringOpacity: ThemeConfig['opacity']
+  ringOffsetWidth: ResolvableTo<KeyValuePair>
+  ringOffsetColor: ThemeConfig['colors']
+  blur: ResolvableTo<KeyValuePair>
+  brightness: ResolvableTo<KeyValuePair>
+  contrast: ResolvableTo<KeyValuePair>
+  dropShadow: ResolvableTo<KeyValuePair<string, string | string[]>>
+  grayscale: ResolvableTo<KeyValuePair>
+  hueRotate: ResolvableTo<KeyValuePair>
+  invert: ResolvableTo<KeyValuePair>
+  saturate: ResolvableTo<KeyValuePair>
+  sepia: ResolvableTo<KeyValuePair>
+  backdropBlur: ThemeConfig['blur']
+  backdropBrightness: ThemeConfig['brightness']
+  backdropContrast: ThemeConfig['contrast']
+  backdropGrayscale: ThemeConfig['grayscale']
+  backdropHueRotate: ThemeConfig['hueRotate']
+  backdropInvert: ThemeConfig['invert']
+  backdropOpacity: ThemeConfig['opacity']
+  backdropSaturate: ThemeConfig['saturate']
+  backdropSepia: ThemeConfig['sepia']
+  transitionProperty: ResolvableTo<KeyValuePair>
+  transitionTimingFunction: ResolvableTo<KeyValuePair>
+  transitionDelay: ResolvableTo<KeyValuePair>
+  transitionDuration: ResolvableTo<KeyValuePair>
+  willChange: ResolvableTo<KeyValuePair>
+  content: ResolvableTo<KeyValuePair>
+
+  // Custom
+  [key: string]: any
+}
+
+// Core plugins related config
+type CorePluginsConfig = CorePluginList[] | Expand<Partial<Record<CorePluginList, boolean>>>
+
+// Plugins related config
+type ValueType =
+  | 'any'
+  | 'color'
+  | 'url'
+  | 'image'
+  | 'length'
+  | 'percentage'
+  | 'position'
+  | 'lookup'
+  | 'generic-name'
+  | 'family-name'
+  | 'number'
+  | 'line-width'
+  | 'absolute-size'
+  | 'relative-size'
+  | 'shadow'
+export interface PluginAPI {
+  // for registering new static utility styles
+  addUtilities(
+    utilities: CSSRuleObject | CSSRuleObject[],
+    options?: Partial<{
+      respectPrefix: boolean
+      respectImportant: boolean
+    }>
+  ): void
+  // for registering new dynamic utility styles
+  matchUtilities<T = string, U = string>(
+    utilities: KeyValuePair<
+      string,
+      (value: T | string, extra: { modifier: U | string | null }) => CSSRuleObject | null
+    >,
+    options?: Partial<{
+      respectPrefix: boolean
+      respectImportant: boolean
+      type: ValueType | ValueType[]
+      values: KeyValuePair<string, T>
+      modifiers: 'any' | KeyValuePair<string, U>
+      supportsNegativeValues: boolean
+    }>
+  ): void
+  // for registering new static component styles
+  addComponents(
+    components: CSSRuleObject | CSSRuleObject[],
+    options?: Partial<{
+      respectPrefix: boolean
+      respectImportant: boolean
+    }>
+  ): void
+  // for registering new dynamic component styles
+  matchComponents<T = string, U = string>(
+    components: KeyValuePair<
+      string,
+      (value: T | string, extra: { modifier: U | string | null }) => CSSRuleObject | null
+    >,
+    options?: Partial<{
+      respectPrefix: boolean
+      respectImportant: boolean
+      type: ValueType | ValueType[]
+      values: KeyValuePair<string, T>
+      modifiers: 'any' | KeyValuePair<string, U>
+      supportsNegativeValues: boolean
+    }>
+  ): void
+  // for registering new base styles
+  addBase(base: CSSRuleObject | CSSRuleObject[]): void
+  // for registering custom variants
+  addVariant(name: string, definition: string | string[] | (() => string) | (() => string)[]): void
+  matchVariant<T = string>(
+    name: string,
+    cb: (value: T | string, extra: { modifier: string | null }) => string | string[],
+    options?: {
+      values?: KeyValuePair<string, T>
+      sort?(
+        a: { value: T | string; modifier: string | null },
+        b: { value: T | string; modifier: string | null }
+      ): number
+    }
+  ): void
+  // for looking up values in the user’s theme configuration
+  theme: <TDefaultValue = Config['theme']>(
+    path?: string,
+    defaultValue?: TDefaultValue
+  ) => TDefaultValue
+  // for looking up values in the user’s Tailwind configuration
+  config: <TDefaultValue = Config>(path?: string, defaultValue?: TDefaultValue) => TDefaultValue
+  // for checking if a core plugin is enabled
+  corePlugins(path: string): boolean
+  // for manually escaping strings meant to be used in class names
+  e: (className: string) => string
+}
+export type PluginCreator = (api: PluginAPI) => void
+export type PluginsConfig = (
+  | PluginCreator
+  | { handler: PluginCreator; config?: Partial<Config> }
+  | {
+      (options: any): { handler: PluginCreator; config?: Partial<Config> }
+      __isOptionsFunction: true
+    }
+)[]
+
+// Top level config related
+interface RequiredConfig {
+  content: ContentConfig
+}
+
+interface OptionalConfig {
+  important: Partial<ImportantConfig>
+  prefix: Partial<PrefixConfig>
+  separator: Partial<SeparatorConfig>
+  safelist: Array<SafelistConfig>
+  blocklist: Array<BlocklistConfig>
+  presets: Array<PresetsConfig>
+  future: Partial<FutureConfig>
+  experimental: Partial<ExperimentalConfig>
+  darkMode: Partial<DarkModeConfig>
+  theme: Partial<ThemeConfig & { extend: Partial<ThemeConfig> }>
+  corePlugins: Partial<CorePluginsConfig>
+  plugins: Partial<PluginsConfig>
+  // Custom
+  [key: string]: any
+}
+
+export type Config = RequiredConfig & Partial<OptionalConfig>

package/types/generated/colors.d.ts

@@ -0,0 +1,298 @@
+export interface DefaultColors {
+  inherit: 'inherit'
+  current: 'currentColor'
+  transparent: 'transparent'
+  black: '#000'
+  white: '#fff'
+  slate: {
+    '50': '#f8fafc'
+    '100': '#f1f5f9'
+    '200': '#e2e8f0'
+    '300': '#cbd5e1'
+    '400': '#94a3b8'
+    '500': '#64748b'
+    '600': '#475569'
+    '700': '#334155'
+    '800': '#1e293b'
+    '900': '#0f172a'
+    '950': '#020617'
+  }
+  gray: {
+    '50': '#f9fafb'
+    '100': '#f3f4f6'
+    '200': '#e5e7eb'
+    '300': '#d1d5db'
+    '400': '#9ca3af'
+    '500': '#6b7280'
+    '600': '#4b5563'
+    '700': '#374151'
+    '800': '#1f2937'
+    '900': '#111827'
+    '950': '#030712'
+  }
+  zinc: {
+    '50': '#fafafa'
+    '100': '#f4f4f5'
+    '200': '#e4e4e7'
+    '300': '#d4d4d8'
+    '400': '#a1a1aa'
+    '500': '#71717a'
+    '600': '#52525b'
+    '700': '#3f3f46'
+    '800': '#27272a'
+    '900': '#18181b'
+    '950': '#09090b'
+  }
+  neutral: {
+    '50': '#fafafa'
+    '100': '#f5f5f5'
+    '200': '#e5e5e5'
+    '300': '#d4d4d4'
+    '400': '#a3a3a3'
+    '500': '#737373'
+    '600': '#525252'
+    '700': '#404040'
+    '800': '#262626'
+    '900': '#171717'
+    '950': '#0a0a0a'
+  }
+  stone: {
+    '50': '#fafaf9'
+    '100': '#f5f5f4'
+    '200': '#e7e5e4'
+    '300': '#d6d3d1'
+    '400': '#a8a29e'
+    '500': '#78716c'
+    '600': '#57534e'
+    '700': '#44403c'
+    '800': '#292524'
+    '900': '#1c1917'
+    '950': '#0c0a09'
+  }
+  red: {
+    '50': '#fef2f2'
+    '100': '#fee2e2'
+    '200': '#fecaca'
+    '300': '#fca5a5'
+    '400': '#f87171'
+    '500': '#ef4444'
+    '600': '#dc2626'
+    '700': '#b91c1c'
+    '800': '#991b1b'
+    '900': '#7f1d1d'
+    '950': '#450a0a'
+  }
+  orange: {
+    '50': '#fff7ed'
+    '100': '#ffedd5'
+    '200': '#fed7aa'
+    '300': '#fdba74'
+    '400': '#fb923c'
+    '500': '#f97316'
+    '600': '#ea580c'
+    '700': '#c2410c'
+    '800': '#9a3412'
+    '900': '#7c2d12'
+    '950': '#431407'
+  }
+  amber: {
+    '50': '#fffbeb'
+    '100': '#fef3c7'
+    '200': '#fde68a'
+    '300': '#fcd34d'
+    '400': '#fbbf24'
+    '500': '#f59e0b'
+    '600': '#d97706'
+    '700': '#b45309'
+    '800': '#92400e'
+    '900': '#78350f'
+    '950': '#451a03'
+  }
+  yellow: {
+    '50': '#fefce8'
+    '100': '#fef9c3'
+    '200': '#fef08a'
+    '300': '#fde047'
+    '400': '#facc15'
+    '500': '#eab308'
+    '600': '#ca8a04'
+    '700': '#a16207'
+    '800': '#854d0e'
+    '900': '#713f12'
+    '950': '#422006'
+  }
+  lime: {
+    '50': '#f7fee7'
+    '100': '#ecfccb'
+    '200': '#d9f99d'
+    '300': '#bef264'
+    '400': '#a3e635'
+    '500': '#84cc16'
+    '600': '#65a30d'
+    '700': '#4d7c0f'
+    '800': '#3f6212'
+    '900': '#365314'
+    '950': '#1a2e05'
+  }
+  green: {
+    '50': '#f0fdf4'
+    '100': '#dcfce7'
+    '200': '#bbf7d0'
+    '300': '#86efac'
+    '400': '#4ade80'
+    '500': '#22c55e'
+    '600': '#16a34a'
+    '700': '#15803d'
+    '800': '#166534'
+    '900': '#14532d'
+    '950': '#052e16'
+  }
+  emerald: {
+    '50': '#ecfdf5'
+    '100': '#d1fae5'
+    '200': '#a7f3d0'
+    '300': '#6ee7b7'
+    '400': '#34d399'
+    '500': '#10b981'
+    '600': '#059669'
+    '700': '#047857'
+    '800': '#065f46'
+    '900': '#064e3b'
+    '950': '#022c22'
+  }
+  teal: {
+    '50': '#f0fdfa'
+    '100': '#ccfbf1'
+    '200': '#99f6e4'
+    '300': '#5eead4'
+    '400': '#2dd4bf'
+    '500': '#14b8a6'
+    '600': '#0d9488'
+    '700': '#0f766e'
+    '800': '#115e59'
+    '900': '#134e4a'
+    '950': '#042f2e'
+  }
+  cyan: {
+    '50': '#ecfeff'
+    '100': '#cffafe'
+    '200': '#a5f3fc'
+    '300': '#67e8f9'
+    '400': '#22d3ee'
+    '500': '#06b6d4'
+    '600': '#0891b2'
+    '700': '#0e7490'
+    '800': '#155e75'
+    '900': '#164e63'
+    '950': '#083344'
+  }
+  sky: {
+    '50': '#f0f9ff'
+    '100': '#e0f2fe'
+    '200': '#bae6fd'
+    '300': '#7dd3fc'
+    '400': '#38bdf8'
+    '500': '#0ea5e9'
+    '600': '#0284c7'
+    '700': '#0369a1'
+    '800': '#075985'
+    '900': '#0c4a6e'
+    '950': '#082f49'
+  }
+  blue: {
+    '50': '#eff6ff'
+    '100': '#dbeafe'
+    '200': '#bfdbfe'
+    '300': '#93c5fd'
+    '400': '#60a5fa'
+    '500': '#3b82f6'
+    '600': '#2563eb'
+    '700': '#1d4ed8'
+    '800': '#1e40af'
+    '900': '#1e3a8a'
+    '950': '#172554'
+  }
+  indigo: {
+    '50': '#eef2ff'
+    '100': '#e0e7ff'
+    '200': '#c7d2fe'
+    '300': '#a5b4fc'
+    '400': '#818cf8'
+    '500': '#6366f1'
+    '600': '#4f46e5'
+    '700': '#4338ca'
+    '800': '#3730a3'
+    '900': '#312e81'
+    '950': '#1e1b4b'
+  }
+  violet: {
+    '50': '#f5f3ff'
+    '100': '#ede9fe'
+    '200': '#ddd6fe'
+    '300': '#c4b5fd'
+    '400': '#a78bfa'
+    '500': '#8b5cf6'
+    '600': '#7c3aed'
+    '700': '#6d28d9'
+    '800': '#5b21b6'
+    '900': '#4c1d95'
+    '950': '#2e1065'
+  }
+  purple: {
+    '50': '#faf5ff'
+    '100': '#f3e8ff'
+    '200': '#e9d5ff'
+    '300': '#d8b4fe'
+    '400': '#c084fc'
+    '500': '#a855f7'
+    '600': '#9333ea'
+    '700': '#7e22ce'
+    '800': '#6b21a8'
+    '900': '#581c87'
+    '950': '#3b0764'
+  }
+  fuchsia: {
+    '50': '#fdf4ff'
+    '100': '#fae8ff'
+    '200': '#f5d0fe'
+    '300': '#f0abfc'
+    '400': '#e879f9'
+    '500': '#d946ef'
+    '600': '#c026d3'
+    '700': '#a21caf'
+    '800': '#86198f'
+    '900': '#701a75'
+    '950': '#4a044e'
+  }
+  pink: {
+    '50': '#fdf2f8'
+    '100': '#fce7f3'
+    '200': '#fbcfe8'
+    '300': '#f9a8d4'
+    '400': '#f472b6'
+    '500': '#ec4899'
+    '600': '#db2777'
+    '700': '#be185d'
+    '800': '#9d174d'
+    '900': '#831843'
+    '950': '#500724'
+  }
+  rose: {
+    '50': '#fff1f2'
+    '100': '#ffe4e6'
+    '200': '#fecdd3'
+    '300': '#fda4af'
+    '400': '#fb7185'
+    '500': '#f43f5e'
+    '600': '#e11d48'
+    '700': '#be123c'
+    '800': '#9f1239'
+    '900': '#881337'
+    '950': '#4c0519'
+  }
+  /** @deprecated As of Tailwind CSS v2.2, `lightBlue` has been renamed to `sky`. Update your configuration file to silence this warning. */ lightBlue: DefaultColors['sky']
+  /** @deprecated As of Tailwind CSS v3.0, `warmGray` has been renamed to `stone`. Update your configuration file to silence this warning. */ warmGray: DefaultColors['stone']
+  /** @deprecated As of Tailwind CSS v3.0, `trueGray` has been renamed to `neutral`. Update your configuration file to silence this warning. */ trueGray: DefaultColors['neutral']
+  /** @deprecated As of Tailwind CSS v3.0, `coolGray` has been renamed to `gray`. Update your configuration file to silence this warning. */ coolGray: DefaultColors['gray']
+  /** @deprecated As of Tailwind CSS v3.0, `blueGray` has been renamed to `slate`. Update your configuration file to silence this warning. */ blueGray: DefaultColors['slate']
+}

package/types/generated/corePluginList.d.ts

@@ -0,0 +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' | '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'