Unable to use opacity variants

[emiliedebra]

trafficstars

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));
}

[jonashaefele]

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).