Installation

Streamline your workflow by synchronizing your design tokens with your repository. Tokens Studio Tailwind will then generate all the corresponding variables and components.

  1. Install Tokens Studio Tailwind

    Start by installing the Tokens Studio Tailwind package.

    Terminal

    npm install --save-dev @gsuiffet/tokens-studio-tailwind

  2. Add the script

    Add the following script to your `package.json`.

    • -j option specifies the absolute path to your JSON design tokens file
    • -t option (optional) is a comma-separated list of your themes

    package.json

    { "scripts": { "dev": "npm run build:sd && next dev", "build": "npm run build:sd && next build", "build:sd": "tokens-studio-tailwind -j tokens/tokens.json -t global,dark" } }

  3. Run the script

    Init Tokens Studio Tailwind by running the script for the first time.

    This will create a `sd-output` folder at the top-level of your project and generate several files according to your tokens.

    Terminal

    npm run build:sd

  4. Import the generated CSS

    Follow this step to import all generated CSS into your `global.css` file.

    • Install `postcss-import`
    • Create a file `postcss.config.js`
    • Import the `./sd-output` folder into your `global.css`

    Terminal

    npm install --save-dev postcss-import

    postcss.config.js

    module.exports = { plugins: { 'postcss-import': {}, tailwindcss: {}, autoprefixer: {}, } }

    global.css

    @import './sd-output'; @tailwind base; @tailwind components; @tailwind utilities; @layer base { // ... }

  5. Set Tailwind CSS class Utilities

    Override or extend your Tailwind theme using the `./sd-output/tw-tokens.json` file.

    tailwind.config.ts

    const tokens = require('./sd-output/tw-tokens.json'); const { spacing, opacity, borderWidth, backgroundImage, color, boxShadow, lineHeight, fontSize, letterSpacing, } = tokens module.exports = { ... theme: { boxShadow, extend: { fontSize, colors: { ...color, ... } }, }, }