alpha() — tailwindcss Function Reference

Architecture documentation for the alpha() function in css-functions.ts from the tailwindcss codebase.

Function typescript OxideEngine Scanner calls 2

Entity Profile

OxideEngine→ Scanner→ alpha() — tailwindcss Function Reference

Dependency Diagram

graph TD
  9c18cb7f_2c6f_5ebe_697c_d24b3f934355["alpha()"]
  2189e39a_5595_cbd9_3bbe_eaf87ccf42a2["css-functions.ts"]
  9c18cb7f_2c6f_5ebe_697c_d24b3f934355 -->|defined in| 2189e39a_5595_cbd9_3bbe_eaf87ccf42a2
  f712ed47_45d4_4e5a_dd73_fdefa1da71da["segment()"]
  9c18cb7f_2c6f_5ebe_697c_d24b3f934355 -->|calls| f712ed47_45d4_4e5a_dd73_fdefa1da71da
  b71e300f_d366_e92d_f71f_413f7ee24e95["withAlpha()"]
  9c18cb7f_2c6f_5ebe_697c_d24b3f934355 -->|calls| b71e300f_d366_e92d_f71f_413f7ee24e95
  style 9c18cb7f_2c6f_5ebe_697c_d24b3f934355 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/css-functions.ts lines 19–40

function alpha(
  _designSystem: DesignSystem,
  _source: AstNode,
  value: string,
  ...rest: string[]
): string {
  let [color, alpha] = segment(value, '/').map((v) => v.trim())

  if (!color || !alpha) {
    throw new Error(
      `The --alpha(…) function requires a color and an alpha value, e.g.: \`--alpha(${color || 'var(--my-color)'} / ${alpha || '50%'})\``,
    )
  }

  if (rest.length > 0) {
    throw new Error(
      `The --alpha(…) function only accepts one argument, e.g.: \`--alpha(${color || 'var(--my-color)'} / ${alpha || '50%'})\``,
    )
  }

  return withAlpha(color, alpha)
}