JNavith / tailwindcss-theme-variants

Media-query- or JavaScript-based theme variants with fallback for Tailwind CSS
https://tailwindcss-theme-variants.web.app/
MIT License
188 stars 5 forks source link

Unable to use groups in variants #18

Open BenJeau opened 2 years ago

BenJeau commented 2 years ago

Love this package, it will save me a lot in my multiple color themed app, but I just have one issue. I'm trying to set a group to the theme and pass it to the variants in the config but I am getting the following error:

Internal server error: Your config mentions the "schemes" variant, but "schemes" doesn't
appear to be a variant. Did you forget or misconfigure a plugin that supplies that variant?

Here is my config (I this is a simple reproduction):

const { themeVariants } = require("tailwindcss-theme-variants");

module.exports = {
  purge: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  darkMode: false,
  theme: {},
  variants: {
    backgroundColor: ["schemes"],
  },
  plugins: [
    themeVariants({
      group: "schemes",
      themes: {
        green: {
          selector: ".themed-green",
          semantics: {
            colors: {
              600: "green.800",
            },
          },
        },
        blue: {
          selector: ".themed-blue",
          semantics: {
            colors: {
              600: "blue.600",
            },
          },
        },
        yellow: {
          selector: ".themed-yellow",
          semantics: {
            colors: {
              600: "yellow.600",
            },
          },
        },
        purple: {
          selector: ".themed-purple",
          semantics: {
            colors: {
              600: "purple.600",
            },
          },
        },
      },
    }),
  ],
};

Would you know how to fix this issue? (I'm using React if that has any impact)

BenJeau commented 2 years ago

mhhh, it seems like it works without specifying the variants