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

withAlpha() — tailwindcss Function Reference

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

Function typescript Oxide PreProcessors called by 7

Entity Profile

Dependency Diagram

graph TD
  2e8f6051_b6e8_4985_14e1_e11717a8d2ab["withAlpha()"]
  ffde8eb7_7def_91ee_918c_be4f250f76a2["utilities.ts"]
  2e8f6051_b6e8_4985_14e1_e11717a8d2ab -->|defined in| ffde8eb7_7def_91ee_918c_be4f250f76a2
  31653e23_464a_3652_4a48_0c82332a92c4["buildPluginApi()"]
  31653e23_464a_3652_4a48_0c82332a92c4 -->|calls| 2e8f6051_b6e8_4985_14e1_e11717a8d2ab
  dabb13bc_6018_934b_19c4_595b7bea686d["createThemeFn()"]
  dabb13bc_6018_934b_19c4_595b7bea686d -->|calls| 2e8f6051_b6e8_4985_14e1_e11717a8d2ab
  762c652a_1128_9ac8_13e9_cc5dfcbadecb["alpha()"]
  762c652a_1128_9ac8_13e9_cc5dfcbadecb -->|calls| 2e8f6051_b6e8_4985_14e1_e11717a8d2ab
  e557c8a4_bb27_ee44_c462_9e238157ad04["buildDesignSystem()"]
  e557c8a4_bb27_ee44_c462_9e238157ad04 -->|calls| 2e8f6051_b6e8_4985_14e1_e11717a8d2ab
  dfcc5bf9_96ac_0c12_9e9e_7288796d1837["asColor()"]
  dfcc5bf9_96ac_0c12_9e9e_7288796d1837 -->|calls| 2e8f6051_b6e8_4985_14e1_e11717a8d2ab
  7fde493f_fce8_21db_d666_1cc635b91c73["alphaReplacedShadowProperties()"]
  7fde493f_fce8_21db_d666_1cc635b91c73 -->|calls| 2e8f6051_b6e8_4985_14e1_e11717a8d2ab
  2fb3c38b_1032_ddeb_49cf_fcc482602e23["alphaReplacedDropShadowProperties()"]
  2fb3c38b_1032_ddeb_49cf_fcc482602e23 -->|calls| 2e8f6051_b6e8_4985_14e1_e11717a8d2ab
  style 2e8f6051_b6e8_4985_14e1_e11717a8d2ab fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/tailwindcss/src/utilities.ts lines 173–190

export function withAlpha(value: string, alpha: string): string {
  if (alpha === null) return value

  // 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}%`
  }

  // No need for `color-mix` if the alpha is `100%`
  if (alpha === '100%') {
    return value
  }

  return `color-mix(in oklab, ${value} ${alpha}, transparent)`
}

Domain

Subdomains

Defined In

Called By

Source

Frequently Asked Questions

What does withAlpha() do?
withAlpha() is a function in the tailwindcss codebase, defined in packages/tailwindcss/src/utilities.ts.
Where is withAlpha() defined?
withAlpha() is defined in packages/tailwindcss/src/utilities.ts at line 173.
What calls withAlpha()?
withAlpha() is called by 7 function(s): alpha, alphaReplacedDropShadowProperties, alphaReplacedShadowProperties, asColor, buildDesignSystem, buildPluginApi, createThemeFn.

Analyze Your Own Codebase

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

Try Supermodel Free