Tailwind

This template helps you generate your design tokens as a Tailwind theme.

This example uses the following parsers:

• to-tailwind to generate your design tokens as a Tailwind theme

• svg-to-jsx to generate icons as JSX components

CLI configuration

If you use the CLI, you need to fill three properties:

• repository is @organization/repository

• personalAccessToken which you can generate in your account settings

• rules are where you provide parsers and compatible options

{
  "version": "2",
  "repository": "@organization/repository",
  // Only use the personalAccessToken when working with the CLI
  "personalAccessToken": "<your-personal-access-token>",
  "rules": [
    {
      "name": "Generate tokens as a Tailwind theme",
      "parsers": [
        {
          "name": "to-tailwind",
          "output": {
            "type": "file",
            "filePath": "theme.js"
          }
        }
      ]
    },
    {
      "name": "Optimize and transform vectors with svgo + Generate JSX components",
      "parsers": [
        {
          "name": "svgo",
          "options": {
            "svgo": {
              "plugins": [
                {
                  "name": "removeDimensions"
                },
                {
                  "name": "convertColors",
                  "params": {
                    "currentColor": true
                  }
                }
              ]
            }
          }
        },
        {
          "name": "svg-to-jsx",
          "output": {
            "type": "directory",
            "directoryPath": "output/assets"
          }
        }
      ]
    }
  ]
}

GitHub configuration

If you use the GitHub, you need to fill 4 properties:

• repository is @organization/repository

• head lets you set the branch your PR will be created on

• base lets you set the branch your PR will be merged on

• rules lets you transform tokens by chaining parsers

Make sure you have connected your GitHub account with your Specify account. Head toward this article to learn more.

{
  "version": "2",
  "head": "specifyrc-json",
  "base": "main",
  "repository": "@organization/repository",
  "rules": [
    {
      "name": "Generate tokens as a Tailwind theme",
      "parsers": [
        {
          "name": "to-tailwind",
          "output": {
            "type": "file",
            "filePath": "theme.js"
          }
        }
      ]
    },
    {
      "name": "Optimize and transform vectors with svgo + Generate JSX components",
      "parsers": [
        {
          "name": "svgo",
          "options": {
            "svgo": {
              "plugins": [
                {
                  "name": "removeDimensions"
                },
                {
                  "name": "convertColors",
                  "params": {
                    "currentColor": true
                  }
                }
              ]
            }
          }
        },
        {
          "name": "svg-to-jsx",
          "output": {
            "type": "directory",
            "directoryPath": "output/assets"
          }
        }
      ]
    }
  ]
}