I want to use bg-current/15 in Tailwind to have background-color as currentColor with 15% opacity.
Based on their documentation, currentColor is supported as a custom variable: https://v2.tailwindcss.com/docs/customizing-colors#color-palette-reference, but the opacity doesn’t work.
Add this to tailwind.config.js:
/** @type {import('tailwindcss').Config} */
module.exports = {
// ...
theme: {
colors: {
current: ({ opacityVariable, opacityValue }) => {
if (opacityVariable !== undefined) {
return `currentColor`
}
if (opacityValue !== undefined) {
return `color-mix(in srgb, currentColor ${opacityValue*100}%, transparent)`
}
return `currentColor`
},
},
},
}
It doesn’t currently work with opacityVariable because it needs a percentage, but it works for the use case in the question.