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 CompilerEngine ModuleResolution called by 7

Entity Profile

Dependency Diagram

graph TD
  bf187488_02a1_3fac_d926_9593a941af2d["withAlpha()"]
  ad196438_55f7_af7b_1604_1d75c1c27d8e["buildPluginApi()"]
  ad196438_55f7_af7b_1604_1d75c1c27d8e -->|calls| bf187488_02a1_3fac_d926_9593a941af2d
  1ea8fd4a_634f_c2f0_5465_01d387d5207b["createThemeFn()"]
  1ea8fd4a_634f_c2f0_5465_01d387d5207b -->|calls| bf187488_02a1_3fac_d926_9593a941af2d
  02e0a602_1f44_67e1_e2ec_886f8341128a["alpha()"]
  02e0a602_1f44_67e1_e2ec_886f8341128a -->|calls| bf187488_02a1_3fac_d926_9593a941af2d
  cebe77e1_f0f2_aeee_417e_2192f5790344["buildDesignSystem()"]
  cebe77e1_f0f2_aeee_417e_2192f5790344 -->|calls| bf187488_02a1_3fac_d926_9593a941af2d
  ce40bfca_da92_1ec0_b286_244e5002cb7e["asColor()"]
  ce40bfca_da92_1ec0_b286_244e5002cb7e -->|calls| bf187488_02a1_3fac_d926_9593a941af2d
  7829d740_b77d_642a_6961_2b062dc27460["alphaReplacedShadowProperties()"]
  7829d740_b77d_642a_6961_2b062dc27460 -->|calls| bf187488_02a1_3fac_d926_9593a941af2d
  db4785ee_f9d4_d30c_c923_4237d7c754d9["alphaReplacedDropShadowProperties()"]
  db4785ee_f9d4_d30c_c923_4237d7c754d9 -->|calls| bf187488_02a1_3fac_d926_9593a941af2d
  style bf187488_02a1_3fac_d926_9593a941af2d 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

Called By

Source

Frequently Asked Questions

What does withAlpha() do?
withAlpha() is a function in the tailwindcss codebase.
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