This is a plugin to generate the config of Tailwind CSS using Style Dictionary.
$ npm install sd-tailwindcss-transformer
# or with yarn
$ yarn add sd-tailwindcss-transformer
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.
const StyleDictionaryModule = require('style-dictionary')
const { makeSdTailwindConfig } = require('sd-tailwindcss-transformer')
const StyleDictionary = StyleDictionaryModule.extend(
makeSdTailwindConfig({ type: 'all' })
)
StyleDictionary.buildAllPlatforms()
Output:
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
mode: "jit",
content: ["./src/**/*.{ts,tsx}"],
darkMode: "class",
theme: {
extend: {
colors: {
base: {
gray: "#111111",
red: "#FF0000",
...
}
},
fontSize: {
small: "0.75rem",
medium: "1rem",
...
}
},
}
}
Creating each theme file
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
.
const StyleDictionaryModule = require('style-dictionary')
const { makeSdTailwindConfig } = require('sd-tailwindcss-transformer')
const types = ['colors', 'fontSize']
types.map((type) => {
const StyleDictionary = StyleDictionaryModule.extend(
makeSdTailwindConfig({ type })
)
StyleDictionary.buildAllPlatforms()
})
Output:
/// colors.tailwind.js
module.exports = {
base: {
gray: "#111111",
red: "#FF0000",
...
}
}
/// 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.
const StyleDictionaryModule = require('style-dictionary')
const { makeSdTailwindConfig } = require('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 StyleDictionary = StyleDictionaryModule.extend(sdConfig)
StyleDictionary.buildAllPlatforms()
Output:
/* 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;
...
}
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
mode: "jit",
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 |
isVariables | Set when using CSS custom variables. Default value: false |
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 |
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' 'forms' 'aspect-ratio' 'line-clamp' 'container-queries' |