tailwindcss Architecture Docs
Home / Function/ registerThemeVariantOverrides() — tailwindcss Function Reference

registerThemeVariantOverrides() — tailwindcss Function Reference

Architecture documentation for the registerThemeVariantOverrides() function in theme-variants.ts from the tailwindcss codebase.

Function typescript Oxide Scanner called by 1

Entity Profile

Dependency Diagram

graph TD
  7bab5de5_3046_0c8a_7965_dceb4b7f277b["registerThemeVariantOverrides()"]
  5ee508a8_650b_2451_3569_714cacb9bf5c["theme-variants.ts"]
  7bab5de5_3046_0c8a_7965_dceb4b7f277b -->|defined in| 5ee508a8_650b_2451_3569_714cacb9bf5c
  2351a59d_92ba_1342_1dcb_39b34492170e["upgradeToFullPluginSupport()"]
  2351a59d_92ba_1342_1dcb_39b34492170e -->|calls| 7bab5de5_3046_0c8a_7965_dceb4b7f277b
  style 7bab5de5_3046_0c8a_7965_dceb4b7f277b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/compat/theme-variants.ts lines 4–68

export function registerThemeVariantOverrides(config: ResolvedConfig, designSystem: DesignSystem) {
  let ariaVariants = config.theme.aria || {}
  let supportsVariants = config.theme.supports || {}
  let dataVariants = config.theme.data || {}

  if (Object.keys(ariaVariants).length > 0) {
    let coreAria = designSystem.variants.get('aria')
    let applyFn = coreAria?.applyFn
    let compounds = coreAria?.compounds
    designSystem.variants.functional(
      'aria',
      (ruleNode, variant) => {
        let value = variant.value
        if (value && value.kind === 'named' && value.value in ariaVariants) {
          return applyFn?.(ruleNode, {
            ...variant,
            value: { kind: 'arbitrary', value: ariaVariants[value.value] as string },
          })
        }
        return applyFn?.(ruleNode, variant)
      },
      { compounds },
    )
  }

  if (Object.keys(supportsVariants).length > 0) {
    let coreSupports = designSystem.variants.get('supports')
    let applyFn = coreSupports?.applyFn
    let compounds = coreSupports?.compounds
    designSystem.variants.functional(
      'supports',
      (ruleNode, variant) => {
        let value = variant.value
        if (value && value.kind === 'named' && value.value in supportsVariants) {
          return applyFn?.(ruleNode, {
            ...variant,
            value: { kind: 'arbitrary', value: supportsVariants[value.value] as string },
          })
        }
        return applyFn?.(ruleNode, variant)
      },
      { compounds },
    )
  }

  if (Object.keys(dataVariants).length > 0) {
    let coreData = designSystem.variants.get('data')
    let applyFn = coreData?.applyFn
    let compounds = coreData?.compounds
    designSystem.variants.functional(
      'data',
      (ruleNode, variant) => {
        let value = variant.value
        if (value && value.kind === 'named' && value.value in dataVariants) {
          return applyFn?.(ruleNode, {
            ...variant,
            value: { kind: 'arbitrary', value: dataVariants[value.value] as string },
          })
        }
        return applyFn?.(ruleNode, variant)
      },
      { compounds },
    )
  }
}

Domain

Subdomains

Defined In

Called By

Source

Frequently Asked Questions

What does registerThemeVariantOverrides() do?
registerThemeVariantOverrides() is a function in the tailwindcss codebase, defined in packages/tailwindcss/src/compat/theme-variants.ts.
Where is registerThemeVariantOverrides() defined?
registerThemeVariantOverrides() is defined in packages/tailwindcss/src/compat/theme-variants.ts at line 4.
What calls registerThemeVariantOverrides()?
registerThemeVariantOverrides() is called by 1 function(s): upgradeToFullPluginSupport.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free