replaceAlpha() — tailwindcss Function Reference

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

Function typescript Oxide Extractor called by 2

Entity Profile

Oxide→ Extractor→ replaceAlpha() — tailwindcss Function Reference

Dependency Diagram

graph TD
  c9298b5e_9901_b387_90f5_20565f550298["replaceAlpha()"]
  ffde8eb7_7def_91ee_918c_be4f250f76a2["utilities.ts"]
  c9298b5e_9901_b387_90f5_20565f550298 -->|defined in| ffde8eb7_7def_91ee_918c_be4f250f76a2
  7fde493f_fce8_21db_d666_1cc635b91c73["alphaReplacedShadowProperties()"]
  7fde493f_fce8_21db_d666_1cc635b91c73 -->|calls| c9298b5e_9901_b387_90f5_20565f550298
  2fb3c38b_1032_ddeb_49cf_fcc482602e23["alphaReplacedDropShadowProperties()"]
  2fb3c38b_1032_ddeb_49cf_fcc482602e23 -->|calls| c9298b5e_9901_b387_90f5_20565f550298
  style c9298b5e_9901_b387_90f5_20565f550298 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})`
}