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: 3 months ago
JSON representation

Export your TailwindCSS theme colors as css custom properties.

• Host: GitHub
• URL: https://github.com/marcreichel/tailwind-css-properties
• Owner: marcreichel
• License: mit
• Created: 2020-03-04T22:55:37.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2022-03-06T20:19:25.000Z (almost 3 years ago)
• Last Synced: 2024-09-29T10:44:11.071Z (3 months ago)
• Topics: css, css-custom-properties, hacktoberfest, tailwind, tailwind-css, tailwind-css-plugin, tailwindcss, tailwindcss-plugin
• Language: JavaScript
• Homepage:
• Size: 21.5 KB
• Stars: 15
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        


    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:

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