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

Reduce dimensionality of `variants` list by grouping themes under a single name #2

Closed JNavith closed 3 years ago

JNavith commented 4 years ago

For instance, the table accent example is unwieldy, so let's try going from this:

variants: {
      backgroundColor: [
            "no-accent",            "green-accent",            "orange-accent",
            "no-accent:hover",      "green-accent:hover",      "orange-accent:hover", 
            "no-accent:odd",        "green-accent:odd",        "orange-accent:odd", 
            "no-accent:odd:hover",  "green-accent:odd:hover",  "orange-accent:odd:hover",
      ],
},

to this:

variants: {
      backgroundColor: [
            "accents", "accents:hover", "accents:odd", "accents:odd:hover",
      ],
},

perhaps by adding group: string; (in this case group: "accents") to the plugin configuration options?