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

printVariant() — tailwindcss Function Reference

Architecture documentation for the printVariant() function in candidate.ts from the tailwindcss codebase.

Function typescript CompilerEngine ModuleResolution calls 4 called by 6

Entity Profile

Dependency Diagram

graph TD
  49c38785_1012_962e_d353_b5b1d6858132["printVariant()"]
  c0ed9081_e732_ecfa_0427_6bc0211bcee4["migrateArbitraryVariants()"]
  c0ed9081_e732_ecfa_0427_6bc0211bcee4 -->|calls| 49c38785_1012_962e_d353_b5b1d6858132
  ec55634f_f6e4_3b8b_1267_0b251c4dade1["printCandidate()"]
  ec55634f_f6e4_3b8b_1267_0b251c4dade1 -->|calls| 49c38785_1012_962e_d353_b5b1d6858132
  045602b5_3428_1ab2_4022_86cb43c8ffe7["createCanonicalizeCandidateCache()"]
  045602b5_3428_1ab2_4022_86cb43c8ffe7 -->|calls| 49c38785_1012_962e_d353_b5b1d6858132
  d6d6389c_e8ac_a603_fb73_c284bcbea150["arbitraryVariants()"]
  d6d6389c_e8ac_a603_fb73_c284bcbea150 -->|calls| 49c38785_1012_962e_d353_b5b1d6858132
  24d8d1d0_89ac_76a1_956a_704ad43fcba6["modernizeArbitraryValuesVariant()"]
  24d8d1d0_89ac_76a1_956a_704ad43fcba6 -->|calls| 49c38785_1012_962e_d353_b5b1d6858132
  cebe77e1_f0f2_aeee_417e_2192f5790344["buildDesignSystem()"]
  cebe77e1_f0f2_aeee_417e_2192f5790344 -->|calls| 49c38785_1012_962e_d353_b5b1d6858132
  a28c52ab_40ed_1df4_72a0_d29fd07e7429["printArbitraryValue()"]
  49c38785_1012_962e_d353_b5b1d6858132 -->|calls| a28c52ab_40ed_1df4_72a0_d29fd07e7429
  ee98a46c_86c9_650d_3a0d_422179ff86ac["simplifyArbitraryVariant()"]
  49c38785_1012_962e_d353_b5b1d6858132 -->|calls| ee98a46c_86c9_650d_3a0d_422179ff86ac
  bf444be1_4cab_9a69_d1ff_4e42ea08b5e9["isVar()"]
  49c38785_1012_962e_d353_b5b1d6858132 -->|calls| bf444be1_4cab_9a69_d1ff_4e42ea08b5e9
  8401eb01_6b4f_c27e_ac2b_ccfb90282782["printModifier()"]
  49c38785_1012_962e_d353_b5b1d6858132 -->|calls| 8401eb01_6b4f_c27e_ac2b_ccfb90282782
  style 49c38785_1012_962e_d353_b5b1d6858132 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/candidate.ts lines 986–1031

export function printVariant(variant: Variant) {
  // Handle static variants
  if (variant.kind === 'static') {
    return variant.root
  }

  // Handle arbitrary variants
  if (variant.kind === 'arbitrary') {
    return `[${printArbitraryValue(simplifyArbitraryVariant(variant.selector))}]`
  }

  let base: string = ''

  // Handle functional variants
  if (variant.kind === 'functional') {
    base += variant.root
    // `@` is a special case for functional variants. We want to print: `@lg`
    // instead of `@-lg`
    let hasDash = variant.root !== '@'
    if (variant.value) {
      if (variant.value.kind === 'arbitrary') {
        let isVarValue = isVar(variant.value.value)
        let value = isVarValue ? variant.value.value.slice(4, -1) : variant.value.value
        let [open, close] = isVarValue ? ['(', ')'] : ['[', ']']

        base += `${hasDash ? '-' : ''}${open}${printArbitraryValue(value)}${close}`
      } else if (variant.value.kind === 'named') {
        base += `${hasDash ? '-' : ''}${variant.value.value}`
      }
    }
  }

  // Handle compound variants
  if (variant.kind === 'compound') {
    base += variant.root
    base += '-'
    base += printVariant(variant.variant)
  }

  // Handle modifiers
  if (variant.kind === 'functional' || variant.kind === 'compound') {
    base += printModifier(variant.modifier)
  }

  return base
}

Domain

Subdomains

Calls

Called By

Source

Frequently Asked Questions

What does printVariant() do?
printVariant() is a function in the tailwindcss codebase.
What does printVariant() call?
printVariant() calls 4 function(s): isVar, printArbitraryValue, printModifier, simplifyArbitraryVariant.
What calls printVariant()?
printVariant() is called by 6 function(s): arbitraryVariants, buildDesignSystem, createCanonicalizeCandidateCache, migrateArbitraryVariants, modernizeArbitraryValuesVariant, printCandidate.

Analyze Your Own Codebase

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

Try Supermodel Free