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 OxideEngine Extractor called by 1

Entity Profile

Dependency Diagram

graph TD
  656b067d_fbc4_1c1c_fdb6_adab0f0af66c["registerThemeVariantOverrides()"]
  dc6f7117_a7a8_9fe6_8e77_b5707eeb53d9["theme-variants.ts"]
  656b067d_fbc4_1c1c_fdb6_adab0f0af66c -->|defined in| dc6f7117_a7a8_9fe6_8e77_b5707eeb53d9
  1a022c10_a26e_d793_740c_267a533619c4["upgradeToFullPluginSupport()"]
  1a022c10_a26e_d793_740c_267a533619c4 -->|calls| 656b067d_fbc4_1c1c_fdb6_adab0f0af66c
  style 656b067d_fbc4_1c1c_fdb6_adab0f0af66c 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