Get Tailwind CSS colors from npm package

First of all, you can already customize or extend Tailwind CSS theme colors in the config file. Only if you use the same color palette in multiple projects, then you would need to store and fetch the colors from a separate npm package.

In your npm package, export the colors as default module. Or you can export multiple color pallets with different export names.

module.exports = {
  primary: {
    50: '#eef8ff',
    100: '#d8eeff',
    200: '#bae2ff',
    300: '#8ad2ff',
    400: '#54b8ff',
    500: '#2c96ff',
    600: '#1578fb',
    700: '#0e61ea',
    800: '#124dbb',
    900: '#154593',
    950: '#122a59',
  },
  secondary: {
    50: '#fffbeb',
    100: '#fdf2c8',
    200: '#fbe48c',
    300: '#f9d050',
    400: '#f7bc28',
    500: '#ea970e',
    600: '#d5760a',
    700: '#b1520c',
    800: '#904010',
    900: '#763511',
    950: '#441a04',
  },
};

Then simply import the colors from plugin in your “tailwind.config.js” file like below

import pluginColors from '@vinkas/tailwind-color-plugin';

/** @type {import('tailwindcss').Config} */
export default {
    content: ['./src/**/*.{html,js,svelte,ts}'],
    theme: {
        extend: {
            colors: { ...pluginColors },
        },
    },
};

Now you have your custom colors “primary” and “secondary” in the Tailwind CSS theme with all the existing.