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 OxideEngine Scanner called by 7

Entity Profile

Dependency Diagram

graph TD
  b71e300f_d366_e92d_f71f_413f7ee24e95["withAlpha()"]
  2bc6f8eb_6339_d09c_79df_e9025a479c97["utilities.ts"]
  b71e300f_d366_e92d_f71f_413f7ee24e95 -->|defined in| 2bc6f8eb_6339_d09c_79df_e9025a479c97
  2efa0a66_c375_c031_24ad_1f7509bb9b14["buildPluginApi()"]
  2efa0a66_c375_c031_24ad_1f7509bb9b14 -->|calls| b71e300f_d366_e92d_f71f_413f7ee24e95
  d30151e4_eee8_a868_f516_c653088f4a03["createThemeFn()"]
  d30151e4_eee8_a868_f516_c653088f4a03 -->|calls| b71e300f_d366_e92d_f71f_413f7ee24e95
  9c18cb7f_2c6f_5ebe_697c_d24b3f934355["alpha()"]
  9c18cb7f_2c6f_5ebe_697c_d24b3f934355 -->|calls| b71e300f_d366_e92d_f71f_413f7ee24e95
  9b965fd7_d8e9_0b43_cd5d_c9294ab598ed["buildDesignSystem()"]
  9b965fd7_d8e9_0b43_cd5d_c9294ab598ed -->|calls| b71e300f_d366_e92d_f71f_413f7ee24e95
  862a63f1_955e_2605_54a1_0a25a475b9e9["asColor()"]
  862a63f1_955e_2605_54a1_0a25a475b9e9 -->|calls| b71e300f_d366_e92d_f71f_413f7ee24e95
  314b128c_0d3c_81a7_f2fa_d11e9edcc320["alphaReplacedShadowProperties()"]
  314b128c_0d3c_81a7_f2fa_d11e9edcc320 -->|calls| b71e300f_d366_e92d_f71f_413f7ee24e95
  6e33a9d2_fe1c_c268_d0ec_3c5725803a90["alphaReplacedDropShadowProperties()"]
  6e33a9d2_fe1c_c268_d0ec_3c5725803a90 -->|calls| b71e300f_d366_e92d_f71f_413f7ee24e95
  style b71e300f_d366_e92d_f71f_413f7ee24e95 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