Home >Web Front-end >CSS Tutorial >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 // 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.
The color-mix() functional notation takes two
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!
https://github.com/tailwindlabs/tailwindcss/blob/next/packages/tailwindcss/src/utilities.ts#L108-L123
https://github.com/tailwindlabs/tailwindcss/blob/c01b8254e822d4f328674357347ca0532f1283a0/packages/tailwindcss/src/design-system.ts#L136
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!