0.0.1 • Published 1 year ago
sd-tailwindcss-transformer-enhancer v0.0.1
Enhancement of sd-tailwindcss-transformer
This plugin preprocesses the design tokens provided to sd-tailwindcss-transformer. Use it in conjunction with sd-tailwindcss-transformer.
Install
$ npm i sd-tailwindcss-transformer sd-tailwindcss-transformer-enhancer -D
# or with yarn
$ yarn add sd-theme-transformer sd-tailwindcss-transformer-enhancer -D
Usage
Normalize your design token with Token Transformer before using it.
npx token-transformer data/input.json data/global.json global
Generate tainwind.config.js
// build-config.js
const styleDictionary = require('style-dictionary')
const { makeSdTailwindConfig } = require('sd-tailwindcss-transformer')
const { enhance } = require('sd-tailwindcss-transformer-enhancer')
const SD = styleDictionary.extend(
enhance(
makeSdTailwindConfig({
type: 'all',
source: ['data/global.json'],
buildPath: 'theme/',
})
)
)
SD.buildAllPlatforms()
Output:
// theme/tainwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
mode: 'jit',
content: ['./src/**/*.{ts,tsx}'],
darkMode: 'class',
theme: {
extend: {
boxShadow: {
textShadowParagraph: '0px 2px 6px 0px #0000008c',
},
fontFamily: {
spoqaHanSans: ['SpoqaHanSans'],
},
fontSize: {
bigTitleMobile: [
'1.875rem',
{
fontFamily: 'SpoqaHanSans',
fontWeight: 'Bold',
lineHeight: '120%',
letterSpacing: '0em',
paragraphSpacing: 0,
paragraphIndent: '0rem',
textCase: 'none',
textDecoration: 'none',
},
],
},
colors: {
red100: '#faced0',
},
},
},
}
Supported theme properties
Property | Limitations | |
---|---|---|
theme.colors | Does not support linear-gradient function in CSS | |
theme.fontSize | Does not support font-weight property in CSS | |
theme.fontFamily | ||
theme.boxShadow |
License
0.0.1
1 year ago