Links

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
GitHub 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"
}
}
]
}
]
}
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"
}
}
]
}
]
}