@neupauer/tailwindcss-plugin-colors

A Tailwind CSS plugin for extracting theme colors as global variables.

Usage no npm install needed!

<script type="module">
  import neupauerTailwindcssPluginColors from 'https://cdn.skypack.dev/@neupauer/tailwindcss-plugin-colors';
</script>

README

Tailwind CSS Plugin – Colors

Plugin for extracting theme colors as global variables.

Install

  1. Install the plugin:
# Using npm
npm install @neupauer/tailwindcss-plugin-colors

# Using Yarn
yarn add @neupauer/tailwindcss-plugin-colors
  1. Add it to your tailwind.config.js file:
// tailwind.config.js
module.exports = {
  // ...
  plugins: [require("@neupauer/tailwindcss-plugin-colors")],
};

// With Optional Config
module.exports = {
  // ...
  plugins: [
    require("@neupauer/tailwindcss-plugin-colors")({
      // prefix: "",          // No Prefix       --blue-500
      // prefix: "tw-color",  // Default Prefix  --tw-color-blue-500
      prefix: "my-prefix",    // Custom Prefix   --my-prefix-blue-500
    }),
  ],
};

Usage

<div style="color: var(--tw-color-blue-500)"></div>