Tailwind Dictionary is a package based on Style Dictionary that allows creating a Tailwind Theme from design tokens.
$ npm install tailwind-dictionary --save-dev
# or
$ yarn add tailwind-dictionary --dev$ tailwind-dictionary| Flag | Short Flag | Description |
|---|---|---|
| --config [path] | -c | Set the config file to use. Must be a .json file |
As an example of usage, you can look at the pbstyles style library.
{
"source": ["tokens/**/*.json"],
"output": "./styles",
"themeAliases": { ... }
}| Property | Type | Description |
|---|---|---|
| source | Array | An array of file path globs to design token files. Exactly like Style Dictionary. |
| output | String | Base path to build the files, must end with a trailing slash. By default is "./styles". |
| themeAliases | Object | Aliases for the Tailwind Theme. Complete theme and documentation. |
The entire list of keys for the Tailwind theme can be found in the documentation or the full default theme. The most important thing is to use the same keys in the config for the theme as in the original theme, such as “fontFamily”.
Aliases must include a category for CTI, for example rounded. They can also include both a category and a type, for instance font/family, where font is the category and family is the type.
{
...
"themeAliases": {
"fontFamily": "font/family",
"fontWeight": "font/weight",
"lineHeight": "font/leading",
"borderRadius": "rounded",
"extend": {
"opacity": "opacity"
}
}
}{
"font": {
"family": {
"sans": { "value": "Inter, sans-serif" }
},
"weight": {
"regular": { "value": 400 },
"medium": { "value": 600 },
"bold": { "value": 700 }
},
"leading": {
"none": { "value": 1 },
"tight": { "value": 1.25 },
"normal": { "value": 1.5 }
}
},
"rounded": {
"0": { "value": "0px" },
"4": { "value": "4px" },
"6": { "value": "6px" },
"8": { "value": "8px" },
"999": { "value": "999px" }
},
"opacity": {
"0": { "value": "0" },
"50": { "value": "0.5" },
"100": { "value": "1" }
}
}module.exports = {
fontFamily: {
sans: 'Inter, sans-serif',
},
fontWeight: {
regular: 400,
medium: 600,
bold: 700,
},
lineHeight: {
none: 1,
tight: 1.25,
normal: 1.5,
},
borderRadius: {
0: '0px',
4: '4px',
6: '6px',
8: '8px',
999: '999px',
},
extend: {
opacity: {
0: '0',
50: '0.5',
100: '1',
},
},
};const theme = require('./styles/tailwind-theme');
module.exports = {
...
theme: {
...theme,
extend: {
...theme.extend,
},
},
...
};{
...
"themeAliases": {
...
"fontSize": "font/size",
...
}
}{
"font": {
"size": {
"12": { "value": "{size.12}" },
"16": { "value": "{size.16}" },
"20": { "value": "{size.20}" }
},
"h64": {
"font-size": {
"value": "64px",
"mixin": "h64"
},
"line-height": {
"value": "1.25",
"mixin": "h64"
},
"font-weight": {
"value": "700",
"mixin": "h64"
}
}
}
}module.exports = {
fontSize: {
12: '12px',
16: '16px',
20: '20px',
h64: ['64px', { lineHeight: 1.25, fontWeight: 700 }],
},
};{
...
"themeAliases": {
...
"screens": "screen",
...
}
}{
"screen": {
"xl": {
"min": { "value": "1441px" }
},
"lg": {
"max": { "value": "1440px" },
"min": { "value": "921px" }
}
}
}module.exports = {
screens: {
xl: { min: '1441px' },
lg: { max: '1440px', min: '921px' },
},
};