to-tailwind
This parser helps you generate a Tailwind theme from all your design tokens coming from Specify.
Unlike the existing to-tailwind parser, this one doesn't have any options yet.
interface parser {
name: 'to-tailwind';
output: {
type: 'file';
filePath: string; // e.g theme.js
};
}
Input
Config
Output
1
{
2
"colors": {
3
"$collection": {
4
"$modes": [
5
"light",
6
"dark"
7
]
8
},
9
"aliases": {
10
"border": {
11
"active": {
12
"$type": "color",
13
"$value": {
14
"dark": {
15
"$alias": "colors.core.label.blue-base",
16
"$mode": "dark"
17
},
18
"light": {
19
"$alias": "colors.core.label.blue-base",
20
"$mode": "light"
21
}
22
}
23
}
24
}
25
},
26
"core": {
27
"label": {
28
"blue-base": {
29
"$type": "color",
30
"$value": {
31
"dark": {
32
"model": "rgb",
33
"red": 96,
34
"green": 168,
35
"blue": 250,
36
"alpha": 1
37
},
38
"light": {
39
"model": "rgb",
40
"red": 17,
41
"green": 125,
42
"blue": 249,
43
"alpha": 1
44
}
45
}
46
},
47
"blue-lighter": {
48
"$type": "color",
49
"$value": {
50
"dark": {
51
"model": "rgb",
52
"red": 41,
53
"green": 52,
54
"blue": 67,
55
"alpha": 1
56
},
57
"light": {
58
"model": "rgb",
59
"red": 219,
60
"green": 236,
61
"blue": 254,
62
"alpha": 1
63
}
64
}
65
}
66
}
67
}
68
},
69
"dimensions": {
70
"$collection": {
71
"$modes": [
72
"desktop",
73
"mobile"
74
]
75
},
76
"base": {
77
"dimension-01": {
78
"$type": "dimension",
79
"$value": {
80
"mobile": {
81
"value": 2,
82
"unit": "px"
83
},
84
"desktop": {
85
"value": 4,
86
"unit": "px"
87
}
88
}
89
},
90
"dimension-02": {
91
"$type": "dimension",
92
"$value": {
93
"mobile": {
94
"value": 4,
95
"unit": "px"
96
},
97
"desktop": {
98
"value": 8,
99
"unit": "px"
100
}
101
}
102
}
103
}
104
}
105
}
.specifyrc.json
1
{
2
"version": "2",
3
"repository": "@owner/repository",
4
"personalAccessToken": "<your-personal-access-token>",
5
"rules": [
6
{
7
"name": "Tailwind theme",
8
"parsers": [
9
{
10
"name": "to-tailwind",
11
"output": {
12
"type": "file",
13
"filePath": "theme.js"
14
}
15
}
16
]
17
}
18
]
19
}
theme.js
1
/** @type {import('tailwindcss').Config} */
2
module.exports = {
3
theme: {
4
extend: {
5
colors: {
6
colors: {
7
core: {
8
label: {
9
'blue-lighter': {
10
'dark': 'rgb(41, 52, 67)',
11
'light': 'rgb(219, 236, 254)'
12
},
13
'blue-base': {
14
'dark': 'rgb(96, 168, 250)',
15
'light': 'rgb(17, 125, 249)'
16
}
17
}
18
},
19
aliases: {
20
border: {
21
active: {
22
'dark': 'rgb(98, 77, 227)',
23
'light': 'rgb(235, 33, 33)'
24
}
25
}
26
}
27
}
28
},
29
spacing: {
30
'dimensions-base-dimension-01-desktop': '4px',
31
'dimensions-base-dimension-01-mobile': '2px',
32
'dimensions-base-dimension-02-desktop': '8px',
33
'dimensions-base-dimension-02-mobile': '4px'
34
}
35
}
36
}
37
}
Last modified 1mo ago