Open emiliedebra opened 1 year ago
I just ran into the same problem.
But first of all, thank you for the amazing plugin!
I think the problem might come from the new way Tailwind handles colors in v3:
https://tailwindcss.com/docs/upgrade-guide#new-opacity-modifier-syntax https://tailwindcss.com/docs/background-color#changing-the-opacity
The semantics plugin generates classes for all "full opacity" variants e.g.:
.bg-primary {
background-color: rgb(255,255,255);
}
.bg-secondary {
background-color: rgb(230,126,29)
}
but it won't generate the classes for the new opacity shorthands like /90
.bg-primary\/90 {
background-color: rgb(255,255,255 / 0.9);
}
.bg-secondary\/90 {
background-color: rgb(230,126,29 / 0.9)
};
If you point me to where to start, I can have a go and make a PR (if I succeed).
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 of0.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):
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: