sd-tailwindcss-transformer
v2.0.0
Published
[![Release](https://badgen.net/github/release/nado1001/sd-tailwindcss-transformer)](https://badgen.net/github/release/nado1001/sd-tailwindcss-transformer) [![Test](https://github.com/nado1001/sd-tailwindcss-transformer/actions/workflows/test.yml/badge.svg
Downloads
26,866
Maintainers
Readme
Style Dictionary Tailwind CSS Transformer
Install
$ npm install sd-tailwindcss-transformer
# or with yarn
$ yarn add sd-tailwindcss-transformer
Usage
Creating configuration file
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.
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:
// 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
.
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:
/// colors.tailwind.js
module.exports = {
base: {
gray: "#111111",
red: "#FF0000",
...
}
}
/// fontSize.tailwind.js
module.exports = {
small: "0.75rem",
medium: "1rem",
...
}
Using CSS custom variables
CSS custom variables can be used by setting isVariables to true
.
In this case, a CSS file must also be generated.
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:
/* 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.
Options
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'
|