tailwindcss-theme-variants icon indicating copy to clipboard operation
tailwindcss-theme-variants copied to clipboard

Unable to use groups in variants

Open BenJeau opened this issue 4 years ago • 1 comments
trafficstars

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 avatar Oct 23 '21 04:10 BenJeau

mhhh, it seems like it works without specifying the variants

BenJeau avatar Oct 23 '21 05:10 BenJeau