Tailwindcss Variable Themes

ewgenius
4

TailwindCSS plugin for defining themes based on css variables

Demo Download

tailwindcss-variable-themes

TailwindCSS plugin for setting up multiple themes based on css variables

Examples

https://tailwindcss-variable-themes.vercel.app/custom (code)

https://tailwindcss-variable-themes.vercel.app/radix-colors (code)

https://tailwindcss-variable-themes.vercel.app/radix-semantic (code)

https://tailwindcss-variable-themes.vercel.app/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

Top categories