Open
Description
I am using this package with Svelte and so far it has been working an absolute charm.
TailwindCSS now allows specifying opacity on colors using this syntax: bg-green/25 which results in an opacity of 0.25 applied to the background color.
It seems as though, with the way the colors get built through tailwindcss-theme-variants these opacity variants are not available on the color classes.
TailwindCSS Config (simplified for the example):
const { themeVariants, prefersLight, prefersDark } = require('tailwindcss-theme-variants');
module.exports = {
content: {
files: [
'./src/**/*.svelte',
'./src/**/*.html',
'./index.html',
],
},
theme: {
colors: {
// Light Colors
'light:accent': '#D93B74',
'light:primary': '#FFFFFF',
'light:on-primary': '#212121',
// Dark Colors
'dark:accent': '#FF5B96',
'dark:primary': '#212121',
'dark:on-primary': '#EAEAEA',
},
},
plugins: [
themeVariants({
baseSelector: 'body',
fallback: true,
themes: {
light: {
mediaQuery: prefersLight,
semantics: {
colors: {
'accent': 'light:accent',
'primary': 'light:primary',
'on-primary': 'light:on-primary',
},
},
},
dark: {
mediaQuery: prefersDark,
semantics: {
colors: {
'accent': 'dark:accent',
'primary': 'dark:primary',
'on-primary': 'dark:on-primary',
},
},
},
},
}),
],
};I would expect to be able to use bg-accent/25 as an example, however this class is not available to me.
I believe the generated css would need to look something like this:
.bg-accent {
--tw-bg-opacity: 1;
background-color: rgb(var(--colors-accent) / var(--tw-bg-opacity));
}