marcreichel / tailwind-css-properties

Export your TailwindCSS theme colors as css custom properties.

This repository is archived, because it is not needed anymore in TailwindCSS v4+ (https://tailwindcss.com/docs/colors#referencing-in-css).

Tailwind CSS Color Properties

A Tailwind CSS plugin that exports theme colors as css custom properties.

🤔 Motivation

Sometimes it is not possible to use Tailwind color classes directly. For example when configuring colors for some third party packages (via JavaScript).

🪄 Usage

After setting up this package your entire Tailwind color palette is available via CSS custom properties and can be referenced like so:

In HTML:

<div style="color: var(--color-indigo-500);">
    Text color using custom CSS property 🎉
</div>

In JavaScript:

module.exports = {
    config: {
        color: 'var(--color-indigo-500)',
    },
};

🚀 Installing

npm install @marcreichel/tailwind-css-properties

or

yarn add @marcreichel/tailwind-css-properties

Require it in your Tailwind config:

// tailwind.config.js
module.exports = {
    /* ... */
    plugins: [
        require('@marcreichel/tailwind-css-properties')
    ]
}

📄 License

Copyright (c) 2022 Marc Reichel and contributors.

Licensed under the MIT license, see LICENSE for details.