Package Exports

tailwindcss-variable-themes
tailwindcss-variable-themes/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tailwindcss-variable-themes) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

tailwindcss-variable-themes

TailwindCSS plugin for setting up multiple themes based on css variables

Examples

https://tailwindcss-variable-themes.ewgenius.me/custom (code)

https://tailwindcss-variable-themes.ewgenius.me/radix-colors (code)

https://tailwindcss-variable-themes.ewgenius.me/tailwind-colors (code)

Installation

Install the plugin from npm:

npm install -D tailwindcss-variable-themes

Then add the plugin to your tailwind.config.js file:

const tailwindThemePlugin = require("tailwindcss-variable-themes");

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    tailwindThemePlugin({
      themes: {
        light: {
          primary: {
            foreground: "#000",
            background: "#fff",
            // ...
          },
          accent: {
            // ...
          },
        },

        dark: {
          // ...
        },
      },
    }),
  ],
};

Add theme class to the root of your application:

<body class="theme-light">
  <!-- ... -->
</body>

Configuration

`themes: object` (required)

Dictionary with theme declarations

themes: {
  // light theme
  light: {
    // primary palette
    primary: {
      // primary palette colors
      foreground: "#000",
      background: "#fff",
      // ...
    },
    // accent palette
    accent: {
      // ...
    },
  },

  dark: {
    primary: {
      foreground: "#fff",
      background: "#000",
      // ...
    }
    // ...
  },
},

`utilityPrefix: string` (optional, default = `"theme"`)

Prefix for generated utility classes

Theme, from previous example will generate following tailwind classes for setting up theme:

.theme-light {
  --primary-foreground: #000;
  --primary-background: #fff;
  /* ... */
}

.theme-dark {
  --primary-foreground: #fff;
  --primary-background: #000;
  /* ... */
}

`varNameMapper: (key: string, i?: number) => string` (optional, default = `(key) => key`)

You can specify custom mapper, in case if you need more control over generated variable names