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.
@layer base {
:root {
--font-size-xs: 1rem; /* is used for `text-xs` class */
--color-red-500: #ff0000; /* is used for `*-red-500` classes */
}
}
// your tailwind.config.js
module.exports = {
presets: [
require('@zemd/tailwind-with-props')
],
};
bun add @zemd/tailwind-with-props --dev
npm install @zemd/tailwind-with-props --save-dev
pnpm add @zemd/tailwind-with-props --dev
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.
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
:
module.exports = {
presets: [
require('@zemd/tailwind-with-props/factory')({ useTailwindColorOrder: false })
],
};
All the code in the repository released under the Apache 2.0 license