tailwindcss Architecture Docs
Home / Function/ alpha() — tailwindcss Function Reference

alpha() — tailwindcss Function Reference

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

Function typescript CompilerEngine ModuleResolution calls 2

Entity Profile

Dependency Diagram

graph TD
  02e0a602_1f44_67e1_e2ec_886f8341128a["alpha()"]
  2a20ea29_c850_cd61_5600_aeebbe3dda66["segment()"]
  02e0a602_1f44_67e1_e2ec_886f8341128a -->|calls| 2a20ea29_c850_cd61_5600_aeebbe3dda66
  bf187488_02a1_3fac_d926_9593a941af2d["withAlpha()"]
  02e0a602_1f44_67e1_e2ec_886f8341128a -->|calls| bf187488_02a1_3fac_d926_9593a941af2d
  style 02e0a602_1f44_67e1_e2ec_886f8341128a 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)
}

Domain

Subdomains

Calls

Source

Frequently Asked Questions

What does alpha() do?
alpha() is a function in the tailwindcss codebase.
What does alpha() call?
alpha() calls 2 function(s): segment, withAlpha.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free