Custom plugin with opacity modifier

[namad]

I want to create a colour plugin that can take not only the main value but a modifier, something like fade-red-100/50. I figured out fade-{value} part works via fade: (value) => ({}), so I was able to make it work with fade-red-100 as it takes values from theme('colors'). Now I am wondering if plugins can split that value and have /50 available?

[wongjn]

The /<opacity> syntax should be automatically available if you pass color as a value for the type key in the second argument object when you call matchUtilities(). See this Tailwind Play for an example (open the Generated CSS panel).

[namad]

Thanks @wongjn, much appreciate it! I am wondering if I can make it work with CSS variables. I want to get opacity values (/50) and use it with 'color-mix'. The thing is that my design system is made with CSS variables, it's just different sets for light and dark modes, something like

.light {
    --accent-red-100: hsla(3.88,84.24%,67.65%,0.125);
    --accent-red-200: hsla(3.88,84.24%,67.65%,0.25);
    --accent-red-300: hsl(4,83.33%,57.65%);
    --accent-red-400: hsl(4.09,90.16%,47.84%);
    --accent-red-500: hsl(4.18,89.33%,44.12%);
    --accent-red-600: hsl(3.64,86.09%,77.45%);
}

.dark {
    --accent-red-100: hsla(3.93,74.39%,67.84%,0.2);
    --accent-red-200: hsla(3.93,74.39%,67.84%,0.4);
    --accent-red-300: hsl(4.18,75.96%,59.22%);
    --accent-red-400: hsl(4.04,76.28%,50.39%);
    --accent-red-500: hsl(4.14,73.11%,76.67%);
    --accent-red-600: hsl(4.14,73.11%,76.67%);
}

And there are quite a few semi-transparent colours already I struggle to with the recommended approach here

    --accent-red-300: 4.18deg 75.96% 59.22%;

//  this one already has alpha value, so I want to use color-mix() instead;
    --accent-red-200: hsla(3.88,84.24%,67.65%,0.25); 

module.exports = {
    theme: {
        colors: {
            'accent-red-300': 'hsl( var(--accent-red-300) / <alpha-value>)',
            'accent-red-100': 'var(--accent-red-100)' // don't work for this one ;(
        }
    }
}

Maybe there is a way to turn this bg-accent-red-100/20 into color-mix(var(--accent-red-100), transparent calc(100% - 80%))?

[sacarvy]

https://una.im/color-mix-opacity/ this blog post can be helpful for you!