asColor() — tailwindcss Function Reference

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

Function typescript OxideCore PreProcessors calls 3 called by 2

Entity Profile

OxideCore→ PreProcessors→ asColor() — tailwindcss Function Reference

Dependency Diagram

graph TD
  8d5e20f1_5091_5002_1260_1f08298c4254["asColor()"]
  d7c9a9e2_d3cf_5ace_a853_63ae8fff0a66["compileBaseUtility()"]
  d7c9a9e2_d3cf_5ace_a853_63ae8fff0a66 -->|calls| 8d5e20f1_5091_5002_1260_1f08298c4254
  7b2cecd9_ff4e_832b_e6dd_26768f0757c1["resolveThemeColor()"]
  7b2cecd9_ff4e_832b_e6dd_26768f0757c1 -->|calls| 8d5e20f1_5091_5002_1260_1f08298c4254
  8412278d_9a59_ef02_8a3b_9c8e8ab65674["withAlpha()"]
  8d5e20f1_5091_5002_1260_1f08298c4254 -->|calls| 8412278d_9a59_ef02_8a3b_9c8e8ab65674
  ce52b228_a53f_22f4_e753_5d926d778157["resolve()"]
  8d5e20f1_5091_5002_1260_1f08298c4254 -->|calls| ce52b228_a53f_22f4_e753_5d926d778157
  3962ad41_d147_715e_98ef_72bf2be093d9["isValidOpacityValue()"]
  8d5e20f1_5091_5002_1260_1f08298c4254 -->|calls| 3962ad41_d147_715e_98ef_72bf2be093d9
  style 8d5e20f1_5091_5002_1260_1f08298c4254 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}%`)
}