sd-tw-transformer v1.2.1

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.

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",
  ...
}

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.

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.

Options

Optional except for type.

License

Apache 2.0