replaceAlpha() — tailwindcss Function Reference

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

Function typescript OxideEngine PreProcessors called by 2

Entity Profile

OxideEngine→ PreProcessors→ replaceAlpha() — tailwindcss Function Reference

Dependency Diagram

graph TD
  3f0c8c99_3ead_e51c_3ce2_4cae3716184f["replaceAlpha()"]
  2bc6f8eb_6339_d09c_79df_e9025a479c97["utilities.ts"]
  3f0c8c99_3ead_e51c_3ce2_4cae3716184f -->|defined in| 2bc6f8eb_6339_d09c_79df_e9025a479c97
  314b128c_0d3c_81a7_f2fa_d11e9edcc320["alphaReplacedShadowProperties()"]
  314b128c_0d3c_81a7_f2fa_d11e9edcc320 -->|calls| 3f0c8c99_3ead_e51c_3ce2_4cae3716184f
  6e33a9d2_fe1c_c268_d0ec_3c5725803a90["alphaReplacedDropShadowProperties()"]
  6e33a9d2_fe1c_c268_d0ec_3c5725803a90 -->|calls| 3f0c8c99_3ead_e51c_3ce2_4cae3716184f
  style 3f0c8c99_3ead_e51c_3ce2_4cae3716184f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/utilities.ts lines 195–205

export function replaceAlpha(value: string, alpha: string): string {
  // Convert numeric values (like `0.5`) to percentages (like `50%`) so they
  // work properly with `color-mix`. Assume anything that isn't a number is
  // safe to pass through as-is, like `var(--my-opacity)`.
  let alphaAsNumber = Number(alpha)
  if (!Number.isNaN(alphaAsNumber)) {
    alpha = `${alphaAsNumber * 100}%`
  }

  return `oklab(from ${value} l a b / ${alpha})`
}