@weirdwolfagency/themewind v1.3.0

themewind

Easily create tailwind themes in your projects along with optional automatic shade generation of theme colors.

Example Usage

Add the package using your preferred package manager e.g.

yarn add @weirdwolfagency/themewind@latest

In your tailwind.config reference the plugin depending on your setup:

import themewind from '@weirdwolfagency/themewind';
const themewind = require('@weirdwolfagency/themewind');

Create themes by instantiating the plugin as shown below - hex values must be used:

plugins: [
  themewind({
    defaultTheme: 'light', // This is required and must match a key in the themes object
    shades: ['primary', 'secondary', 'tertiary'], // This can be ommitted if no shades are required
    themes: {
      light: {
        colors: {
          primary: '#1fb6ff',
          secondary: '#dd00ff',
          tertiary: '#500098',
          neutral: '#888',
          surface: '#f6f2eb',
          content: '#272b2e'
        },
      },
      dark: {
        colors: {
          primary: '#1fb6ff',
          secondary: '#dd00ff',
          tertiary: '#500098',
          neutral: '#888',
          surface: '#272b2e',
          content: '#f6f2eb'
        },
      },
    },
  }),
]

Things to Note

The defaultTheme config has the css scope of :root,[data-theme=defaultTheme]. Every other theme has a css scope of [data-theme=theme] allowing you to switch themes easily by setting the data-theme attribute anywhere within your application's html.

For theme colors, shades can be generated automatically by including its key in the shades array.

All Tailwind utility classes will be available for each theme color, with or without automatic shading - this includes opacity modifiers i.e. bg-primary/80 or bg-primary-500/80 if shades are generated.

Each theme color will also be available as a standalone css variable. For example, the config above will generate the css variables as below:

Due to supporting the awesome tailwind opacity modifiers you will notice they are just the RGB representation. In order to use these variables in your css you can do so by wrapping them in the css rgb function.

div {
  background-color: rgb(var(--color-primary));
}

Theme Switching

If you want your application to be able to switch themes at the click of the button, all that is required is to add a click handler that sets the data-theme attribute as required on the html tag.