asColor() — tailwindcss Function Reference

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

Function typescript OxideEngine Extractor calls 3 called by 2

Entity Profile

OxideEngine→ Extractor→ asColor() — tailwindcss Function Reference

Dependency Diagram

graph TD
  862a63f1_955e_2605_54a1_0a25a475b9e9["asColor()"]
  2bc6f8eb_6339_d09c_79df_e9025a479c97["utilities.ts"]
  862a63f1_955e_2605_54a1_0a25a475b9e9 -->|defined in| 2bc6f8eb_6339_d09c_79df_e9025a479c97
  aa6d74f0_f677_1f2e_7377_fa1f895e27ab["compileBaseUtility()"]
  aa6d74f0_f677_1f2e_7377_fa1f895e27ab -->|calls| 862a63f1_955e_2605_54a1_0a25a475b9e9
  3c29461b_66f7_8e1b_36c1_73009733fbe6["resolveThemeColor()"]
  3c29461b_66f7_8e1b_36c1_73009733fbe6 -->|calls| 862a63f1_955e_2605_54a1_0a25a475b9e9
  b71e300f_d366_e92d_f71f_413f7ee24e95["withAlpha()"]
  862a63f1_955e_2605_54a1_0a25a475b9e9 -->|calls| b71e300f_d366_e92d_f71f_413f7ee24e95
  71290460_1a88_ed12_99a9_992d30e78865["resolve()"]
  862a63f1_955e_2605_54a1_0a25a475b9e9 -->|calls| 71290460_1a88_ed12_99a9_992d30e78865
  221550f3_8829_561e_60fb_5a3a4abac7b8["isValidOpacityValue()"]
  862a63f1_955e_2605_54a1_0a25a475b9e9 -->|calls| 221550f3_8829_561e_60fb_5a3a4abac7b8
  style 862a63f1_955e_2605_54a1_0a25a475b9e9 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}%`)
}