-
Notifications
You must be signed in to change notification settings - Fork 0
/
tailwind.config.ts
45 lines (40 loc) · 1.31 KB
/
tailwind.config.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import { Config } from 'tailwindcss';
import colors from 'tailwindcss/colors';
import headlessUi from '@headlessui/tailwindcss';
import patterns from 'tailwindcss-patterns';
type TwColor = keyof typeof colors;
type TwColorValue = (typeof colors)[TwColor];
const addDefault = (color: TwColorValue) => {
// if color is an object we can destructure:
if (typeof color === 'object') return { ...color, DEFAULT: color[500] };
// there is no default color, so we can just return the color
return color;
};
// For each key, set it as colors[value] and add default
/**
* Generate colors object, by using the colors from tailwindcss/colors, and setting the default color to the 500 value.
* @param colorsMap - Object with the colors to use
* @returns Object with the colors
*/
const getColors = (colorsMap: Record<string, TwColor>) => {
return Object.keys(colorsMap).reduce((acc, key) => {
const value = colorsMap[key];
return { ...acc, [key]: addDefault(colors[value]) };
}, {});
};
const config: Config = {
content: ['./src/**/*.{js,jsx,ts,tsx}', './index.html'],
theme: {
extend: {
colors: getColors({
success: 'green',
warning: 'yellow',
danger: 'red',
info: 'blue',
default: 'gray',
}),
},
},
plugins: [headlessUi, patterns],
};
export default config;