Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aryan02420/postcss-themewind
A PostCSS plugin to make theming with TailwindCSS easy and fun
https://github.com/aryan02420/postcss-themewind
plugin postcss tailwindcss
Last synced: about 1 month ago
JSON representation
A PostCSS plugin to make theming with TailwindCSS easy and fun
- Host: GitHub
- URL: https://github.com/aryan02420/postcss-themewind
- Owner: aryan02420
- License: mit
- Created: 2021-07-01T17:13:59.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-08-16T21:04:12.000Z (over 3 years ago)
- Last Synced: 2024-10-28T22:11:03.517Z (2 months ago)
- Topics: plugin, postcss, tailwindcss
- Language: JavaScript
- Homepage:
- Size: 119 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# PostCSS Themewind
[PostCSS] plugin to make theming with [TailwindCSS] simpler.
[postcss]: https://github.com/postcss/postcss
[tailwindcss]: https://github.com/tailwindlabs/tailwindcss
```css
/* Input */
.foo {
--brand-primary: useColor(theme('colors.red.500'));
--brand-secondary: useColor(#ffee33);
}
/* Output */
.foo {
--brand-primary: 239, 68, 68;
--brand-secondary: 255, 238, 51;
}
```
## Usage
**Step 1:** Install plugin:
```sh
npm i -D postcss-themewind
```
**Step 2:** Add the plugin to `postcss.config.js`:
```diff
module.exports = {
plugins: {
tailwindcss: {},
+ 'postcss-themewind': {},
autoprefixer: {},
},
}
/* OR */
module.exports = {
plugins: [
require('tailwindcss'),
+ require('postcss-themewind'),
require('autoprefixer'),
],
}
```
**Step 3:** Modify `tailwind.config.js`:
```diff
+const { useColor } = require('postcss-themewind/utils')
module.exports = {
...
theme: {
extend: {
colors: {
brand: {
+ primary: useColor('--brand-primary'),
+ secondary: useColor('--brand-secondary'),
}
},
},
},
}
```
### Demo
[aryan02420/postcss-themewind-demo](https://github.com/aryan02420/postcss-themewind-demo/)
