Home >Web Front-end >CSS Tutorial >withAlpha utility in Tailwind CSS source code.

withAlpha utility in Tailwind CSS source code.

Patricia Arquette
Patricia ArquetteOriginal
2024-10-11 10:19:301122browse

In this article, we analyse withAlpha utitlity function in Tailwind CSS source code.

/**
 * Apply opacity to a color using `color-mix`.
 */
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}%`
  }

  // If the alpha value is a percentage, we can pass it directly to
  // `color-mix()`. In any other case, e.g.: `var(…)`, `round(…)`, … we need to
  // make sure it's a percentage.
  else if (alpha[alpha.length - 1] !== '%') {
    alpha = `calc(${alpha} * 100%)`
  }

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

The beauty about this utility function is that it comes with comments explaining what the code does.

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

First the alpha is converted to Number, withAlpha accepts alpha as a string and is assigned to a variable named alphaAsNumber

if alphaAsNumber is not a number, then this is converted to % by multiplying it with * 100.

// If the alpha value is a percentage, we can pass it directly to
// `color-mix()`. In any other case, e.g.: `var(…)`, `round(…)`, … we need to
// make sure it's a percentage.
else if (alpha[alpha.length - 1] !== '%') {
  alpha = `calc(${alpha} * 100%)`
}

The way this above code snippet ensures that alpha value is a percentage is by checking if the item at last index is ‘%’, otherwise, it is multiplied with *100%.

and finally color-mix is returned.

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

but you might be wondering what a color-mix is.

color-mix

The color-mix() functional notation takes two values and returns the result of mixing them in a given colorspace by a given amount. — MDN documentation.

withAlpha utility in Tailwind CSS source code.

About us:

At Think Throo, we are on a mission to teach the advanced codebase architectural concepts used in open-source projects.

10x your coding skills by practising advanced architectural concepts in Next.js/React, learn the best practices and build production-grade projects.

We are open source — https://github.com/thinkthroo/thinkthroo (Do give us a star!)

We also provide web development and technical writing services. Reach out to us at hello@thinkthroo.com to learn more!

References:

  1. https://github.com/tailwindlabs/tailwindcss/blob/next/packages/tailwindcss/src/utilities.ts#L108-L123

  2. https://github.com/tailwindlabs/tailwindcss/blob/c01b8254e822d4f328674357347ca0532f1283a0/packages/tailwindcss/src/design-system.ts#L136

  3. https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix



The above is the detailed content of withAlpha utility in Tailwind CSS source code.. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn