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 OxideCore Extractor called by 7

Entity Profile

Dependency Diagram

graph TD
  8412278d_9a59_ef02_8a3b_9c8e8ab65674["withAlpha()"]
  3b6a2079_7f12_42cd_ba9f_a57ecec4366d["buildPluginApi()"]
  3b6a2079_7f12_42cd_ba9f_a57ecec4366d -->|calls| 8412278d_9a59_ef02_8a3b_9c8e8ab65674
  67fcef46_defb_2c9b_ab9b_59ae912b91f5["createThemeFn()"]
  67fcef46_defb_2c9b_ab9b_59ae912b91f5 -->|calls| 8412278d_9a59_ef02_8a3b_9c8e8ab65674
  2bad1303_cbb5_27d5_f1f7_ece98cdf10cb["alpha()"]
  2bad1303_cbb5_27d5_f1f7_ece98cdf10cb -->|calls| 8412278d_9a59_ef02_8a3b_9c8e8ab65674
  c58d3214_88d6_f4fc_257f_8e84def5b24f["buildDesignSystem()"]
  c58d3214_88d6_f4fc_257f_8e84def5b24f -->|calls| 8412278d_9a59_ef02_8a3b_9c8e8ab65674
  8d5e20f1_5091_5002_1260_1f08298c4254["asColor()"]
  8d5e20f1_5091_5002_1260_1f08298c4254 -->|calls| 8412278d_9a59_ef02_8a3b_9c8e8ab65674
  537db6f9_ffa5_12bf_0cec_283e545c7822["alphaReplacedShadowProperties()"]
  537db6f9_ffa5_12bf_0cec_283e545c7822 -->|calls| 8412278d_9a59_ef02_8a3b_9c8e8ab65674
  f82aa221_959b_12a7_fef5_44d13694b11e["alphaReplacedDropShadowProperties()"]
  f82aa221_959b_12a7_fef5_44d13694b11e -->|calls| 8412278d_9a59_ef02_8a3b_9c8e8ab65674
  style 8412278d_9a59_ef02_8a3b_9c8e8ab65674 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