asColor() — tailwindcss Function Reference

Architecture documentation for the asColor() function in utilities.ts from the tailwindcss codebase.

Function typescript CompilerEngine ModuleResolution calls 3 called by 2

Entity Profile

CompilerEngine→ ModuleResolution→ asColor() — tailwindcss Function Reference

Dependency Diagram

graph TD
  ce40bfca_da92_1ec0_b286_244e5002cb7e["asColor()"]
  b6aaa1cb_54ef_7dee_8d81_ee36d2da08a7["compileBaseUtility()"]
  b6aaa1cb_54ef_7dee_8d81_ee36d2da08a7 -->|calls| ce40bfca_da92_1ec0_b286_244e5002cb7e
  7d010542_1cda_a540_2ca4_161f665333e4["resolveThemeColor()"]
  7d010542_1cda_a540_2ca4_161f665333e4 -->|calls| ce40bfca_da92_1ec0_b286_244e5002cb7e
  bf187488_02a1_3fac_d926_9593a941af2d["withAlpha()"]
  ce40bfca_da92_1ec0_b286_244e5002cb7e -->|calls| bf187488_02a1_3fac_d926_9593a941af2d
  fb0edc12_e3ff_ec56_83b9_8cf4f1b5f8e5["resolve()"]
  ce40bfca_da92_1ec0_b286_244e5002cb7e -->|calls| fb0edc12_e3ff_ec56_83b9_8cf4f1b5f8e5
  93c615c1_689e_1732_75cf_439dd95740f6["isValidOpacityValue()"]
  ce40bfca_da92_1ec0_b286_244e5002cb7e -->|calls| 93c615c1_689e_1732_75cf_439dd95740f6
  style ce40bfca_da92_1ec0_b286_244e5002cb7e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/utilities.ts lines 210–234

export function asColor(
  value: string,
  modifier: CandidateModifier | null,
  theme: Theme,
): string | null {
  if (!modifier) return value

  if (modifier.kind === 'arbitrary') {
    return withAlpha(value, modifier.value)
  }

  // Check if the modifier exists in the `opacity` theme configuration and use
  // that value if so.
  let alpha = theme.resolve(modifier.value, ['--opacity'])
  if (alpha) {
    return withAlpha(value, alpha)
  }

  if (!isValidOpacityValue(modifier.value)) {
    return null
  }

  // The modifier is a bare value like `50`, so convert that to `50%`.
  return withAlpha(value, `${modifier.value}%`)
}