withAlpha utility in Tailwind CSS source code.

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

// Co…


This content originally appeared on DEV Community and was authored by thinkThroo

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 <color> values and returns the result of mixing them in a given colorspace by a given amount. — MDN documentation.

Image description

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




This content originally appeared on DEV Community and was authored by thinkThroo


Print Share Comment Cite Upload Translate Updates
APA

thinkThroo | Sciencx (2024-10-10T22:38:15+00:00) withAlpha utility in Tailwind CSS source code.. Retrieved from https://www.scien.cx/2024/10/10/withalpha-utility-in-tailwind-css-source-code/

MLA
" » withAlpha utility in Tailwind CSS source code.." thinkThroo | Sciencx - Thursday October 10, 2024, https://www.scien.cx/2024/10/10/withalpha-utility-in-tailwind-css-source-code/
HARVARD
thinkThroo | Sciencx Thursday October 10, 2024 » withAlpha utility in Tailwind CSS source code.., viewed ,<https://www.scien.cx/2024/10/10/withalpha-utility-in-tailwind-css-source-code/>
VANCOUVER
thinkThroo | Sciencx - » withAlpha utility in Tailwind CSS source code.. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/10/10/withalpha-utility-in-tailwind-css-source-code/
CHICAGO
" » withAlpha utility in Tailwind CSS source code.." thinkThroo | Sciencx - Accessed . https://www.scien.cx/2024/10/10/withalpha-utility-in-tailwind-css-source-code/
IEEE
" » withAlpha utility in Tailwind CSS source code.." thinkThroo | Sciencx [Online]. Available: https://www.scien.cx/2024/10/10/withalpha-utility-in-tailwind-css-source-code/. [Accessed: ]
rf:citation
» withAlpha utility in Tailwind CSS source code. | thinkThroo | Sciencx | https://www.scien.cx/2024/10/10/withalpha-utility-in-tailwind-css-source-code/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.