[](https://badgen.net/github/release/nado1001/sd-tailwindcss-transformer) [



This is a plugin to generate the config of Tailwind CSS using Style Dictionary.
``bash`
$ npm install sd-tailwindcss-transformeror with yarn
$ yarn add sd-tailwindcss-transformer
> [!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",
...
}
},
}
}
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",
...
}
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.
Optional except for type.
| Attribute | Description | Type |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| type | Set the name of each theme (colors, fontSize, etc.) for 'all' or tailwind. | 'all' or string |js
| formatType | Set the format of the Tailwind CSS configuration file.
Default value: | 'js' 'cjs' |false
| isVariables | Set when using CSS custom variables.
Default value: | boolean |'extend'
| extend | Set to add transformed styles to the key within the 'theme' key or not. true
Default value: | boolean |source
| source | attribute of style-dictionary.['tokens/*/.json']
Default value: | Array of strings |platform.transforms
| transforms | attribute of style-dictionary.['attribute/cti','name/cti/kebab']
Default value: | Array of strings |platform.buildPath
| buildPath | attribute of style-dictionary.'build/web/'
Default value: | string |platform.prefix
| prefix | attribute of style-dictionary.['./src/*/.{ts,tsx}']
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: | Array of strings |'class'
| tailwind.darkMode | Dark Mode attribute of Tailwind CSS. Set if necessary when 'all' is set in type.
Default value: | 'media' 'class' |'typography'
| tailwind.plugin | Tailwind CSS official plugins. Set if necessary when 'all' is set in type. | Array of ['typography', options] 'forms' ['forms', options] 'aspect-ratio' 'line-clamp' 'container-queries'` |