Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/marcreichel/tailwind-css-properties

Export your TailwindCSS theme colors as css custom properties.
https://github.com/marcreichel/tailwind-css-properties

css css-custom-properties hacktoberfest tailwind tailwind-css tailwind-css-plugin tailwindcss tailwindcss-plugin

Last synced: 1 day ago
JSON representation

Export your TailwindCSS theme colors as css custom properties.

Awesome Lists containing this project

README

        


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:

```html


Text color using custom CSS property 🎉

```

In JavaScript:

```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:

```javascript
// 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](LICENSE) for details.