sd-tailwindcss-transformer-enhancer

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

Apache 2.0