Skip to content

Export your TailwindCSS theme colors as css custom properties.

License

Notifications You must be signed in to change notification settings

marcreichel/tailwind-css-properties

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Tailwind CSS Color Properties

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

version npm bundle size npm bundle size downloads license

🤔 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.