Multiple themes

[aervxa]

Get rid of dark: classes, who needs it?
Before you come at me, just listen me out

Upgrade tailwind configs to be like this:

export default {
  // darkMode: "class", // Why only dark theme?
  themes: {
    dark: "theme-dark" // class name
    myTheme: "theme-custom" // class name
  }
  theme: { // this can be renamed to style, but for compatibility's sake it should be left as `theme`
    // extend: {} // Why even have it like this?
    dark: {
      // In here should be equivalent to inside `theme` but will only affect the theme `dark`
      // which is specified in `themes` object
      extend: {
        // styles eg. `colors: {}`
      }
    }
  }
}

Why?

Imagine being able to have more than one theme without terrible workarounds like using root variables:

:root[class=theme-custom] {
  /* set custom colors for each different theme */
}