tailwind-dictionary v1.0.1

Tailwind Dictionary

Tailwind Dictionary is a package based on Style Dictionary that allows creating a Tailwind Theme from design tokens.

Installation

$ npm install tailwind-dictionary --save-dev
# or
$ yarn add tailwind-dictionary --dev

Usage

$ tailwind-dictionary

Example

As an example of usage, you can look at the pbstyles style library.

config.json

{
  "source": ["tokens/**/*.json"],
  "output": "./styles",
  "themeAliases": { ... }
}

Example of theme aliases

The entire list of keys for the Tailwind theme can be found in the documentation or the full default theme. The most important thing is to use the same keys in the config for the theme as in the original theme, such as “fontFamily”.

Aliases must include a category for CTI, for example rounded. They can also include both a category and a type, for instance font/family, where font is the category and family is the type.

Config

{
  ...
  "themeAliases": {
    "fontFamily": "font/family",
    "fontWeight": "font/weight",
    "lineHeight": "font/leading",
    "borderRadius": "rounded",
    "extend": {
      "opacity": "opacity"
    }
  }
}

Design-tokens

{
  "font": {
    "family": {
      "sans": { "value": "Inter, sans-serif" }
    },
    "weight": {
      "regular": { "value": 400 },
      "medium": { "value": 600 },
      "bold": { "value": 700 }
    },
    "leading": {
      "none": { "value": 1 },
      "tight": { "value": 1.25 },
      "normal": { "value": 1.5 }
    }
  },
  "rounded": {
    "0": { "value": "0px" },
    "4": { "value": "4px" },
    "6": { "value": "6px" },
    "8": { "value": "8px" },
    "999": { "value": "999px" }
  },
  "opacity": {
    "0": { "value": "0" },
    "50": { "value": "0.5" },
    "100": { "value": "1" }
  }
}

Tailwind Theme

module.exports = {
  fontFamily: {
    sans: 'Inter, sans-serif',
  },
  fontWeight: {
    regular: 400,
    medium: 600,
    bold: 700,
  },
  lineHeight: {
    none: 1,
    tight: 1.25,
    normal: 1.5,
  },
  borderRadius: {
    0: '0px',
    4: '4px',
    6: '6px',
    8: '8px',
    999: '999px',
  },
  extend: {
    opacity: {
      0: '0',
      50: '0.5',
      100: '1',
    },
  },
};

Usage in a Tailwind theme

const theme = require('./styles/tailwind-theme');

module.exports = {
  ...
  theme: {
    ...theme,
    extend: {
      ...theme.extend,
    },
  },
  ...
};

Example of typography mixins

Config

{
  ...
  "themeAliases": {
    ...
    "fontSize": "font/size",
    ...
  }
}

Design-tokens

{
  "font": {
    "size": {
      "12": { "value": "{size.12}" },
      "16": { "value": "{size.16}" },
      "20": { "value": "{size.20}" }
    },
    "h64": {
      "font-size": {
        "value": "64px",
        "mixin": "h64"
      },
      "line-height": {
        "value": "1.25",
        "mixin": "h64"
      },
      "font-weight": {
        "value": "700",
        "mixin": "h64"
      }
    }
  }
}

Tailwind Theme

module.exports = {
  fontSize: {
    12: '12px',
    16: '16px',
    20: '20px',
    h64: ['64px', { lineHeight: 1.25, fontWeight: 700 }],
  },
};

Example of media query

Config

{
  ...
  "themeAliases": {
    ...
    "screens": "screen",
    ...
  }
}

Design-tokens

{
  "screen": {
    "xl": {
      "min": { "value": "1441px" }
    },
    "lg": {
      "max": { "value": "1440px" },
      "min": { "value": "921px" }
    }
  }
}

Tailwind Theme

module.exports = {
  screens: {
    xl: { min: '1441px' },
    lg: { max: '1440px', min: '921px' },
  },
};