asColor() — tailwindcss Function Reference

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

Function typescript Oxide Scanner calls 3 called by 2

Entity Profile

Oxide→ Scanner→ asColor() — tailwindcss Function Reference

Dependency Diagram

graph TD
  dfcc5bf9_96ac_0c12_9e9e_7288796d1837["asColor()"]
  ffde8eb7_7def_91ee_918c_be4f250f76a2["utilities.ts"]
  dfcc5bf9_96ac_0c12_9e9e_7288796d1837 -->|defined in| ffde8eb7_7def_91ee_918c_be4f250f76a2
  d3da176b_5d25_508c_c940_26dbd0d5b553["compileBaseUtility()"]
  d3da176b_5d25_508c_c940_26dbd0d5b553 -->|calls| dfcc5bf9_96ac_0c12_9e9e_7288796d1837
  8e2c4c54_aa31_b4ac_9cd4_b3d16178fc76["resolveThemeColor()"]
  8e2c4c54_aa31_b4ac_9cd4_b3d16178fc76 -->|calls| dfcc5bf9_96ac_0c12_9e9e_7288796d1837
  2e8f6051_b6e8_4985_14e1_e11717a8d2ab["withAlpha()"]
  dfcc5bf9_96ac_0c12_9e9e_7288796d1837 -->|calls| 2e8f6051_b6e8_4985_14e1_e11717a8d2ab
  08526c9b_2b40_0b09_3dbc_69449eef6643["resolve()"]
  dfcc5bf9_96ac_0c12_9e9e_7288796d1837 -->|calls| 08526c9b_2b40_0b09_3dbc_69449eef6643
  12c0cce9_e937_c069_fc6e_1817b8c7583b["isValidOpacityValue()"]
  dfcc5bf9_96ac_0c12_9e9e_7288796d1837 -->|calls| 12c0cce9_e937_c069_fc6e_1817b8c7583b
  style dfcc5bf9_96ac_0c12_9e9e_7288796d1837 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}%`)
}