Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zemd/tailwind-with-props
A Tailwind preset that maps theme config options to CSS custom properties
https://github.com/zemd/tailwind-with-props
css tailwind-presets tailwindcss
Last synced: 3 days ago
JSON representation
A Tailwind preset that maps theme config options to CSS custom properties
- Host: GitHub
- URL: https://github.com/zemd/tailwind-with-props
- Owner: zemd
- License: apache-2.0
- Created: 2024-03-01T19:52:00.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-04-01T14:14:07.000Z (8 months ago)
- Last Synced: 2024-09-06T03:24:04.026Z (2 months ago)
- Topics: css, tailwind-presets, tailwindcss
- Language: JavaScript
- Homepage:
- Size: 117 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
# @zemd/tailwind-with-props
[](https://npmjs.com/package/@zemd/tailwind-with-props)
This is a simple Tailwindcss preset that maps theme options with css props. This allows you to
configure theme from within your `global.css` file.
## Usage
```css
@layer base {
:root {
--font-size-xs: 1rem; /* is used for `text-xs` class */
--color-red-500: #ff0000; /* is used for `*-red-500` classes */
}
}
```
```js
// your tailwind.config.js
module.exports = {
presets: [
require('@zemd/tailwind-with-props')
],
};
```
## Installation
```sh
bun add @zemd/tailwind-with-props --dev
npm install @zemd/tailwind-with-props --save-dev
pnpm add @zemd/tailwind-with-props --dev
```
## Mapping reference
| Tailwindcss class | Prop ranges | Named props |
|-------------------|----------|----------------|
| font-size | `--font-size-{1-17}`,
`--font-size-fluid-{1-4}`,
`--font-size-short-{1-17}` | |
| colors | `--color-{color}-{50-950}` | all top level colors, like `--color-white`, `--color-black`, `--color-primary` etc. |
| border-radius | `--radius-{1-6}` | `--radius-none`,
`--radius-px`,
`--radius-full`,
`--radius-default` |
| border width | `--border-{0,2,4,8}` | `--border-px`,
`--border-default` |
| box-shadow | `--shadow-{1-5}`,
`--shadow-inner-1` | `--shadow-default` |
| drop-shadow | `--drop-shadow-{1-5}` | `--drop-shadow-none`,
`--drop-shadow-default` |
| font-family | | `--font-sans`,
`--font-serif`,
`--font-mono`,
`--font-display` |
| letter-spacing | `--letter-spacing-{1-6}` | |
| line-height | `--line-height-{1-17}`,
`--line-height-short-{1-17}` | `--line-height-none`,
`--line-height-tight`,
`--line-height-snug`,
`--line-height-normal`,
`--line-height-relaxed`,
`--line-height-loose` |
As you can notice there are some additional props that can be used. I added them intentionally to
increase a functionality for the theme. But if you do not use them, you can simply ignore them.
## Configuring color palette
In some cases, you might want to configure how you want to name your colors. For example,
instead of using `--color-red-500` you might want to use `--color-red-6`.
In such a case you can use factory method for the preset in your `tailwind.config.js`:
```js
module.exports = {
presets: [
require('@zemd/tailwind-with-props/factory')({ useTailwindColorOrder: false })
],
};
```
## License
All the code in the repository released under the Apache 2.0 license
## Donate
[](https://www.patreon.com/red_rabbit)
[](https://u24.gov.ua/)