PostCSS Themewind

PostCSS plugin to make theming with TailwindCSS simpler.

/* Input */
.foo {
  --brand-primary: useColor(theme('colors.red.500'));
  --brand-secondary: useColor(#ffee33);
}

/* Output */
.foo {
  --brand-primary: 239, 68, 68;
  --brand-secondary: 255, 238, 51;
}

Usage

Step 1: Install plugin:

npm i -D postcss-themewind

Step 2: Add the plugin to postcss.config.js:

module.exports = {
  plugins: {
    tailwindcss: {},
+   'postcss-themewind': {},
    autoprefixer: {},
  },
}

/* OR */

module.exports = {
  plugins: [
    require('tailwindcss'),
+   require('postcss-themewind'),
    require('autoprefixer'),
  ],
}

Step 3: Modify tailwind.config.js:

+const { useColor } = require('postcss-themewind/utils')

module.exports = {
  ...
  theme: {
    extend: {
      colors: {
        brand: {
+         primary: useColor('--brand-primary'),
+         secondary: useColor('--brand-secondary'),
        }
      },
    },
  },
}

Demo

aryan02420/postcss-themewind-demo