tailwindcss-css-variables-color-palette-plugin/src/index.ts

Color Palette plugin using CSS variables for TailwindCSS; forked from tailwindcss-css-variables-palette-plugin

import plugin from 'tailwindcss/plugin';
import {Config, PluginAPI, PluginCreator} from "tailwindcss/types/config";
import { extendedThemeColors, extractColorVars } from './utils/generators';
import {generatePalette} from './default/palette';

const paletteCssVariablesPlugin = plugin.withOptions(function (options: PluginOptions): PluginCreator {
  return function({ addBase, theme }: PluginAPI) {
    addBase({
      ':root': extractColorVars(theme('colors')),
    });
  }
}, function (options: PluginOptions): Config {

  const colorsPalette = extendedThemeColors(options?.colors, options?.algo);

  return ({
    content: [],
    theme: {
      extend: {
        colors: {
          inherit: 'inherit',
          current: 'currentColor',
          transparent: 'transparent',
          black: '#000',
          white: '#fff',
          ...colorsPalette
        }
      }
    }
  });
});

export default {paletteCssVariablesPlugin, generatePalette};