Ready-to-use TPDS TailwindCSS configuration for your project.
Grab this TailwindCSS configuration JSON to quickly strap up a new project using the Tempo design system design tokens.
Create a new file with the name tailwind.config.js in the root of your project to quickly strap up a new project and paste the below configuration in it.
Follow the official instructions to install TailwindCSS in your project.
Note: Some frontend frameworks may require additional configuration to work with TailwindCSS.
1{
2 "content": [
3 "./src/**/*.{js,ts,jsx,tsx}",
4 "./website/**/*.{js,ts,jsx,tsx}"
5 ],
6 "darkMode": "class",
7 "future": {
8 "hoverOnlyWhenSupported": true
9 },
10 "theme": {
11 "fontSize": {
12 "xxxs": "0.625rem",
13 "xxs": "0.6875rem",
14 "xs": "0.75rem",
15 "sm": "0.875rem",
16 "base": "1rem",
17 "lg": "1.125rem",
18 "xl": "1.25rem",
19 "2xl": "1.5rem",
20 "3xl": "1.875rem",
21 "4xl": "2.25rem",
22 "5xl": "3rem",
23 "6xl": "3.75rem",
24 "7xl": "4.5rem",
25 "8xl": "6rem",
26 "9xl": "8rem"
27 },
28 "screens": {
29 "sm": "640px",
30 "md": "768px",
31 "lg": "1024px",
32 "xl": "1280px",
33 "2xl": "1536px"
34 },
35 "fontFamily": {
36 "sans": [
37 "Inter",
38 "sans-serif"
39 ],
40 "serif": [
41 "Courier New",
42 "serif"
43 ],
44 "mono": [
45 "SF Mono",
46 "mono"
47 ]
48 },
49 "borderRadius": {
50 "none": "0",
51 "sm": "0.125rem",
52 "DEFAULT": "0.25rem",
53 "md": "0.375rem",
54 "lg": "0.5rem",
55 "full": "9999px",
56 "large": "12px"
57 },
58 "colors": {
59 "transparent": "transparent",
60 "current": "currentColor",
61 "black": "#000000",
62 "white": "#FFFFFF",
63 "green": "#2DB92D",
64 "red": "#EB5757",
65 "blue": "#1972F5",
66 "yellow": "#FCDB17",
67 "purple": "#6200EE",
68 "magenta": "#E549FF",
69 "orange": "#F08727",
70 "success": "#2DB92D",
71 "danger": "#EB5757",
72 "info": "#1972F5",
73 "warning": "#F08727"
74 },
75 "extend": {
76 "opacity": {
77 "5": "0.05",
78 "10": "0.1",
79 "20": "0.2",
80 "50": "0.5"
81 },
82 "colors": {
83 "green-scale": {
84 "50": "#EBFAEB",
85 "100": "#C1F0C1",
86 "200": "#99E699",
87 "300": "#84E184",
88 "400": "#32CD32",
89 "500": "#2DB92D",
90 "600": "#28A428",
91 "700": "#1E7B1E",
92 "800": "#145214",
93 "900": "#0F3E0F",
94 "950": "#0B2E0B"
95 },
96 "red-scale": {
97 "50": "#FDEEEE",
98 "100": "#F9CBCB",
99 "200": "#F6B2B2",
100 "300": "#F28E8E",
101 "400": "#EF7979",
102 "500": "#EB5757",
103 "600": "#D64F4F",
104 "700": "#A73E3E",
105 "800": "#813030",
106 "900": "#632525",
107 "950": "#3B1515"
108 },
109 "blue-scale": {
110 "50": "#E8F1FE",
111 "100": "#D1E3FD",
112 "200": "#A3C7FB",
113 "300": "#75AAF9",
114 "400": "#478EF7",
115 "500": "#1972F5",
116 "600": "#1561D0",
117 "700": "#1250AB",
118 "800": "#0E3F87",
119 "900": "#0A2E62",
120 "950": "#061D3D"
121 },
122 "yellow-scale": {
123 "50": "#FFFBE8",
124 "100": "#FEF4B7",
125 "200": "#FEEE94",
126 "300": "#FDE764",
127 "400": "#FDE245",
128 "500": "#FCDB17",
129 "600": "#E5C715",
130 "700": "#B39B10",
131 "800": "#8B780D",
132 "900": "#6A5C0A"
133 },
134 "purple-scale": {
135 "50": "#EFE6FD",
136 "100": "#CEB0FA",
137 "200": "#B78AF7",
138 "300": "#9654F4",
139 "400": "#8133F1",
140 "500": "#6200EE",
141 "600": "#5900D9",
142 "700": "#4600A9",
143 "800": "#360083",
144 "900": "#290064"
145 },
146 "magenta-scale": {
147 "50": "#FCEDFF",
148 "100": "#F7C7FF",
149 "200": "#F3ABFF",
150 "300": "#EE85FF",
151 "400": "#EA6DFF",
152 "500": "#E549FF",
153 "600": "#D042E8",
154 "700": "#A334B5",
155 "800": "#7E288C",
156 "900": "#601F6B"
157 },
158 "orange-scale": {
159 "50": "#FEF3E9",
160 "100": "#FADABC",
161 "200": "#F8C89C",
162 "300": "#F5AF6E",
163 "400": "#F39F52",
164 "500": "#F08727",
165 "600": "#DA7B23",
166 "700": "#AA601C",
167 "800": "#844A15",
168 "900": "#653910",
169 "950": "#37210C"
170 },
171 "grey-light-scale": {
172 "50": "#FDFDFD",
173 "100": "#F9F9FA",
174 "200": "#F6F7F7",
175 "300": "#EEEFF1",
176 "400": "#D7DEE5",
177 "500": "#C6D0D9",
178 "600": "#AEB9C4",
179 "700": "#9DA6AE",
180 "800": "#88929A",
181 "900": "#717980"
182 },
183 "grey-dark-scale": {
184 "50": "#717980",
185 "100": "#666D73",
186 "200": "#5A6166",
187 "300": "#4F555A",
188 "400": "#44494D",
189 "500": "#393D40",
190 "600": "#2D3033",
191 "700": "#222426",
192 "800": "#1D1E20",
193 "900": "#17181A"
194 }
195 },
196 "spacing": {
197 "xxl": "80px",
198 "xxxl": "120px",
199 "xl": "64px",
200 "lg": "48px",
201 "md": "32px",
202 "sm": "24px",
203 "xs": "16px",
204 "xxs": "8px"
205 },
206 "backgroundColor": {
207 "body": "var(--bg-body)",
208 "window": "var(--bg-window)",
209 "button": "var(--bg-button)",
210 "button-hover": "var(--bg-button-hover)",
211 "button-active": "var(--bg-button-active)",
212 "button-secondary": "var(--bg-button-secondary)",
213 "button-secondary-hover": "var(--bg-button-secondary-hover)",
214 "button-secondary-active": "var(--bg-button-secondary-active)",
215 "success-hover": "var(--bg-success-hover)",
216 "success-active": "var(--bg-success-active)",
217 "info-hover": "var(--bg-info-hover)",
218 "info-active": "var(--bg-info-active)",
219 "warning-hover": "var(--bg-warning-hover)",
220 "warning-active": "var(--bg-warning-active)",
221 "danger-hover": "var(--bg-danger-hover)",
222 "danger-active": "var(--bg-danger-active)",
223 "navbutton": "var(--bg-navbutton)",
224 "navbutton-hover": "var(--bg-navbutton-hover)",
225 "navbutton-active": "var(--bg-navbutton-active)",
226 "input": "var(--bg-input)",
227 "input-focus": "var(--bg-input-focus)",
228 "input-hover": "var(--bg-input-hover)",
229 "checkbox-selected-enabled": "var(--bg-checkbox-selected-enabled)",
230 "checkbox-selected-hover": "var(--bg-checkbox-selected-hover)",
231 "checkbox-selected-active": "var(--bg-checkbox-selected-active)",
232 "checkbox-unselected-enabled": "var(--bg-checkbox-unselected-enabled)",
233 "checkbox-unselected-hover": "var(--bg-checkbox-unselected-hover)",
234 "checkbox-unselected-active": "var(--bg-checkbox-unselected-active)"
235 },
236 "textColor": {
237 "primary": "var(--text-primary)",
238 "secondary": "var(--text-secondary)",
239 "tertiary": "var(--text-tertiary)",
240 "button": "var(--text-button)",
241 "button-hover": "var(--text-button-hover)",
242 "button-active": "var(--text-button-active)",
243 "button-secondary": "var(--text-button-secondary)",
244 "button-secondary-hover": "var(--text-button-secondary-hover)",
245 "button-secondary-active": "var(--text-button-secondary-active)",
246 "button-success": "var(--text-button-success)",
247 "button-success-hover": "var(--text-button-success-hover)",
248 "button-success-active": "var(--text-button-success-active)",
249 "button-info": "var(--text-button-info)",
250 "button-info-hover": "var(--text-button-info-hover)",
251 "button-info-active": "var(--text-button-info-active)",
252 "button-warning": "var(--text-button-warning)",
253 "button-warning-hover": "var(--text-button-warning-hover)",
254 "button-warning-active": "var(--text-button-warning-active)",
255 "button-danger": "var(--text-button-danger)",
256 "button-danger-hover": "var(--text-button-danger-hover)",
257 "button-danger-active": "var(--text-button-danger-active)",
258 "navbutton": "var(--text-navbutton)",
259 "navbutton-hover": "var(--text-navbutton-hover)",
260 "navbutton-active": "var(--text-navbutton-active)",
261 "input": "var(--text-input)",
262 "input-focus": "var(--text-input-focus)",
263 "input-hover": "var(--text-input-hover)",
264 "checkbox-selected-enabled": "var(--text-checkbox-selected-enabled)",
265 "checkbox-selected-hover": "var(--text-checkbox-selected-hover)",
266 "checkbox-selected-active": "var(--text-checkbox-selected-active)",
267 "checkbox-unselected-enabled": "var(--text-checkbox-unselected-enabled)",
268 "checkbox-unselected-hover": "var(--text-checkbox-unselected-hover)",
269 "checkbox-unselected-active": "var(--text-checkbox-unselected-active)"
270 },
271 "borderColor": {
272 "body": "var(--border-body)",
273 "window": "var(--border-window)",
274 "button": "var(--border-button)",
275 "button-hover": "var(--border-button-hover)",
276 "button-active": "var(--border-button-active)",
277 "button-secondary": "var(--border-button-secondary)",
278 "button-secondary-hover": "var(--border-button-secondary-hover)",
279 "button-secondary-active": "var(--border-button-secondary-active)",
280 "button-success": "var(--border-button-success)",
281 "button-success-hover": "var(--border-button-success-hover)",
282 "button-success-active": "var(--border-button-success-active)",
283 "button-info": "var(--border-button-info)",
284 "button-info-hover": "var(--border-button-info-hover)",
285 "button-info-active": "var(--border-button-info-active)",
286 "button-warning": "var(--border-button-warning)",
287 "button-warning-hover": "var(--border-button-warning-hover)",
288 "button-warning-active": "var(--border-button-warning-active)",
289 "button-danger": "var(--border-button-danger)",
290 "button-danger-hover": "var(--border-button-danger-hover)",
291 "button-danger-active": "var(--border-button-danger-active)",
292 "input": "var(--border-input)",
293 "input-focus": "var(--border-input-focus)",
294 "input-hover": "var(--border-input-hover)",
295 "checkbox-selected-enabled": "var(--border-checkbox-selected-enabled)",
296 "checkbox-selected-hover": "var(--border-checkbox-selected-hover)",
297 "checkbox-selected-active": "var(--border-checkbox-selected-active)",
298 "checkbox-unselected-enabled": "var(--border-checkbox-unselected-enabled)",
299 "checkbox-unselected-hover": "var(--border-checkbox-unselected-hover)",
300 "checkbox-unselected-active": "var(--border-checkbox-unselected-active)"
301 }
302 }
303 },
304 "plugins": [
305 {
306 "config": {
307 "theme": {
308 "containers": {
309 "xs": "20rem",
310 "sm": "24rem",
311 "md": "28rem",
312 "lg": "32rem",
313 "xl": "36rem",
314 "2xl": "42rem",
315 "3xl": "48rem",
316 "4xl": "56rem",
317 "5xl": "64rem",
318 "6xl": "72rem",
319 "7xl": "80rem"
320 }
321 }
322 }
323 }
324 ]
325}