alpha() — tailwindcss Function Reference

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

Function typescript Oxide Extractor calls 2

Entity Profile

Oxide→ Extractor→ alpha() — tailwindcss Function Reference

Dependency Diagram

graph TD
  762c652a_1128_9ac8_13e9_cc5dfcbadecb["alpha()"]
  1648a493_13b2_8170_f86b_607e088d9565["css-functions.ts"]
  762c652a_1128_9ac8_13e9_cc5dfcbadecb -->|defined in| 1648a493_13b2_8170_f86b_607e088d9565
  c58cbb33_f3cc_0b4f_844a_15bf66a1dc61["segment()"]
  762c652a_1128_9ac8_13e9_cc5dfcbadecb -->|calls| c58cbb33_f3cc_0b4f_844a_15bf66a1dc61
  2e8f6051_b6e8_4985_14e1_e11717a8d2ab["withAlpha()"]
  762c652a_1128_9ac8_13e9_cc5dfcbadecb -->|calls| 2e8f6051_b6e8_4985_14e1_e11717a8d2ab
  style 762c652a_1128_9ac8_13e9_cc5dfcbadecb 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)
}