Style Dictionary Tailwind CSS Transformer



This is a plugin to generate the config of Tailwind CSS using Style Dictionary.

Install

``bash
$ npm install sd-tailwindcss-transformer


or with yarn


$ yarn add sd-tailwindcss-transformer
`

Usage

$3

> [!WARNING]
> If you are using v4 of style-dictionary, install v2.1.0

Generate tailwind.config.js by setting type to all.
See Creating each theme file if you wish to customize the configuration file with plugin functions, etc.

`js
import StyleDictionary from 'style-dictionary';
import { makeSdTailwindConfig } from 'sd-tailwindcss-transformer';

const styleDictionaryTailwind = new StyleDictionary(
makeSdTailwindConfig({ type: 'all' }),
);
await styleDictionaryTailwind.hasInitialized;
await styleDictionaryTailwind.buildAllPlatforms();
`

Output:

`js
// tailwind.config.js
/* @type {import('tailwindcss').Config} /
module.exports = {
content: ["./src/*/.{ts,tsx}"],
darkMode: "class",
theme: {
extend: {
colors: {
base: {
gray: "#111111",
red: "#FF0000",
...
}
},
fontSize: {
small: "0.75rem",
medium: "1rem",
...
}
},
}
}
`

$3

Create an object for each theme, assuming that various customizations will be made in the configuration file.
Import and use the created files in tailwind.config.js.

`js
import StyleDictionary from 'style-dictionary';
import { makeSdTailwindConfig } from 'sd-tailwindcss-transformer';

const types = ['colors', 'fontSize'];

for (const type of types) {
let tailwindConfig = makeSdTailwindConfig({
type,
});

const styleDictionaryTailwind = new StyleDictionary(tailwindConfig);

await styleDictionaryTailwind.hasInitialized;
await styleDictionaryTailwind.buildAllPlatforms();
}
`

Output:

`js
/// colors.tailwind.js
module.exports = {
base: {
gray: "#111111",
red: "#FF0000",
...
}
}
`

`js
/// fontSize.tailwind.js
module.exports = {
small: "0.75rem",
medium: "1rem",
...
}
`

$3

CSS custom variables can be used by setting isVariables to true.
In this case, a CSS file must also be generated.

`js
import StyleDictionary from 'style-dictionary';
import { makeSdTailwindConfig } from 'sd-tailwindcss-transformer';

const sdConfig = makeSdTailwindConfig({
type: 'all',
isVariables: true,
});

sdConfig.platforms['css'] = {
transformGroup: 'css',
buildPath: './styles/',
files: [
{
destination: 'tailwind.css',
format: 'css/variables',
options: {
outputReferences: true,
},
},
],
};

const styleDictionaryTailwind = new StyleDictionary(
makeSdTailwindConfig({ type: 'all' }),
);
await styleDictionaryTailwind.hasInitialized;
await styleDictionaryTailwind.buildAllPlatforms();
`

Output:

`css
/ tailwind.css /
/**
* Do not edit directly
* Generated on ○○○○
*/

:root {
--font-size-medium: 1rem;
--font-size-small: 0.75rem;
--colors-base-red: #ff0000;
--colors-base-gray: #111111;
...;
}
`

`js
// tailwind.config.js
/* @type {import('tailwindcss').Config} /
module.exports = {
content: ["./src/*/.{ts,tsx}"],
darkMode: "class",
theme: {
extend: {
colors: {
base: {
gray: "var(--colors-base-gray)",
red: "var(--colors-base-red)",
...
}
},
fontSize: {
small: "var(--font-size-small)",
medium: "var(--font-size-medium)",
...
}
},
}
}
`

Please see Example for details.

$3

Optional except for type.

| Attribute | Description | Type |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| type | Set the name of each theme (colors, fontSize, etc.) for 'all' or tailwind. | 'all' or string |
| formatType | Set the format of the Tailwind CSS configuration file.
Default value: js | 'js' 'cjs' |
| isVariables | Set when using CSS custom variables.
Default value: false | boolean |
| extend | Set to add transformed styles to the 'extend' key within the 'theme' key or not.
Default value: true | boolean |
| source | source attribute of style-dictionary.
Default value: ['tokens/*/.json'] | Array of strings |
| transforms | platform.transforms attribute of style-dictionary.
Default value: ['attribute/cti','name/cti/kebab'] | Array of strings |
| buildPath | platform.buildPath attribute of style-dictionary.
Default value: 'build/web/' | string |
| prefix | platform.prefix attribute of style-dictionary.
Valid when using css variables (isVariables: true) | string |
| tailwind.content | Content attribute of Tailwind CSS. Set if necessary when 'all' is set in type.
Default value: ['./src/*/.{ts,tsx}'] | Array of strings |
| tailwind.darkMode | Dark Mode attribute of Tailwind CSS. Set if necessary when 'all' is set in type.
Default value: 'class' | 'media' 'class' |
| tailwind.plugin | Tailwind CSS official plugins. Set if necessary when 'all' is set in type. | Array of 'typography' ['typography', options] 'forms' ['forms', options] 'aspect-ratio' 'line-clamp' 'container-queries'` |

License

Apache 2.0