Skip to content

Commit e8bdc41

Browse files
eWloYW8eWloYW8
committed
feat: add color safelist for tag colors in Tailwind CSS configuration
1 parent fce79f6 commit e8bdc41

File tree

1 file changed

+108
-90
lines changed

1 file changed

+108
-90
lines changed

‎tailwind.config.ts‎

Lines changed: 108 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,117 @@
11
import type { Config } from "tailwindcss"
22

3+
const TAG_COLORS = [
4+
"bg-blue-100", "text-blue-800", "dark:bg-blue-900", "dark:text-blue-200",
5+
"bg-green-100", "text-green-800", "dark:bg-green-900", "dark:text-green-200",
6+
"bg-red-100", "text-red-800", "dark:bg-red-900", "dark:text-red-200",
7+
"bg-purple-100", "text-purple-800", "dark:bg-purple-900", "dark:text-purple-200",
8+
"bg-pink-100", "text-pink-800", "dark:bg-pink-900", "dark:text-pink-200",
9+
"bg-indigo-100", "text-indigo-800", "dark:bg-indigo-900", "dark:text-indigo-200",
10+
"bg-cyan-100", "text-cyan-800", "dark:bg-cyan-900", "dark:text-cyan-200",
11+
"bg-orange-100", "text-orange-800", "dark:bg-orange-900", "dark:text-orange-200",
12+
"bg-teal-100", "text-teal-800", "dark:bg-teal-900", "dark:text-teal-200",
13+
"bg-amber-100", "text-amber-800", "dark:bg-amber-900", "dark:text-amber-200",
14+
];
15+
const colorSafelist = TAG_COLORS.flatMap(group => group.split(" "));
16+
17+
318
const config = {
419
darkMode: ["class"],
520
content: [
6-
'./pages/**/*.{ts,tsx}',
7-
'./components/**/*.{ts,tsx}',
8-
'./app/**/*.{ts,tsx}',
9-
'./src/**/*.{ts,tsx}',
21+
'./pages/**/*.{ts,tsx}',
22+
'./components/**/*.{ts,tsx}',
23+
'./app/**/*.{ts,tsx}',
24+
'./src/**/*.{ts,tsx}',
1025
],
26+
safelist: [
27+
...colorSafelist,
28+
],
1129
prefix: "",
1230
theme: {
13-
container: {
14-
center: true,
15-
padding: '2rem',
16-
screens: {
17-
'2xl': '1400px'
18-
}
19-
},
20-
extend: {
21-
fontFamily: {
22-
sans: [
23-
'var(--font-sans)'
24-
]
25-
},
26-
colors: {
27-
border: 'hsl(var(--border))',
28-
input: 'hsl(var(--input))',
29-
ring: 'hsl(var(--ring))',
30-
background: 'hsl(var(--background))',
31-
foreground: 'hsl(var(--foreground))',
32-
primary: {
33-
DEFAULT: 'hsl(var(--primary))',
34-
foreground: 'hsl(var(--primary-foreground))'
35-
},
36-
secondary: {
37-
DEFAULT: 'hsl(var(--secondary))',
38-
foreground: 'hsl(var(--secondary-foreground))'
39-
},
40-
destructive: {
41-
DEFAULT: 'hsl(var(--destructive))',
42-
foreground: 'hsl(var(--destructive-foreground))'
43-
},
44-
muted: {
45-
DEFAULT: 'hsl(var(--muted))',
46-
foreground: 'hsl(var(--muted-foreground))'
47-
},
48-
accent: {
49-
DEFAULT: 'hsl(var(--accent))',
50-
foreground: 'hsl(var(--accent-foreground))'
51-
},
52-
popover: {
53-
DEFAULT: 'hsl(var(--popover))',
54-
foreground: 'hsl(var(--popover-foreground))'
55-
},
56-
card: {
57-
DEFAULT: 'hsl(var(--card))',
58-
foreground: 'hsl(var(--card-foreground))'
59-
},
60-
chart: {
61-
'1': 'hsl(var(--chart-1))',
62-
'2': 'hsl(var(--chart-2))',
63-
'3': 'hsl(var(--chart-3))',
64-
'4': 'hsl(var(--chart-4))',
65-
'5': 'hsl(var(--chart-5))'
66-
}
67-
},
68-
borderRadius: {
69-
lg: 'var(--radius)',
70-
md: 'calc(var(--radius) - 2px)',
71-
sm: 'calc(var(--radius) - 4px)'
72-
},
73-
keyframes: {
74-
'accordion-down': {
75-
from: {
76-
height: '0'
77-
},
78-
to: {
79-
height: 'var(--radix-accordion-content-height)'
80-
}
81-
},
82-
'accordion-up': {
83-
from: {
84-
height: 'var(--radix-accordion-content-height)'
85-
},
86-
to: {
87-
height: '0'
88-
}
89-
}
90-
},
91-
animation: {
92-
'accordion-down': 'accordion-down 0.2s ease-out',
93-
'accordion-up': 'accordion-up 0.2s ease-out'
94-
},
31+
container: {
32+
center: true,
33+
padding: '2rem',
34+
screens: {
35+
'2xl': '1400px'
36+
}
37+
},
38+
extend: {
39+
fontFamily: {
40+
sans: [
41+
'var(--font-sans)'
42+
]
43+
},
44+
colors: {
45+
border: 'hsl(var(--border))',
46+
input: 'hsl(var(--input))',
47+
ring: 'hsl(var(--ring))',
48+
background: 'hsl(var(--background))',
49+
foreground: 'hsl(var(--foreground))',
50+
primary: {
51+
DEFAULT: 'hsl(var(--primary))',
52+
foreground: 'hsl(var(--primary-foreground))'
53+
},
54+
secondary: {
55+
DEFAULT: 'hsl(var(--secondary))',
56+
foreground: 'hsl(var(--secondary-foreground))'
57+
},
58+
destructive: {
59+
DEFAULT: 'hsl(var(--destructive))',
60+
foreground: 'hsl(var(--destructive-foreground))'
61+
},
62+
muted: {
63+
DEFAULT: 'hsl(var(--muted))',
64+
foreground: 'hsl(var(--muted-foreground))'
65+
},
66+
accent: {
67+
DEFAULT: 'hsl(var(--accent))',
68+
foreground: 'hsl(var(--accent-foreground))'
69+
},
70+
popover: {
71+
DEFAULT: 'hsl(var(--popover))',
72+
foreground: 'hsl(var(--popover-foreground))'
73+
},
74+
card: {
75+
DEFAULT: 'hsl(var(--card))',
76+
foreground: 'hsl(var(--card-foreground))'
77+
},
78+
chart: {
79+
'1': 'hsl(var(--chart-1))',
80+
'2': 'hsl(var(--chart-2))',
81+
'3': 'hsl(var(--chart-3))',
82+
'4': 'hsl(var(--chart-4))',
83+
'5': 'hsl(var(--chart-5))'
84+
}
85+
},
86+
borderRadius: {
87+
lg: 'var(--radius)',
88+
md: 'calc(var(--radius) - 2px)',
89+
sm: 'calc(var(--radius) - 4px)'
90+
},
91+
keyframes: {
92+
'accordion-down': {
93+
from: {
94+
height: '0'
95+
},
96+
to: {
97+
height: 'var(--radix-accordion-content-height)'
98+
}
99+
},
100+
'accordion-up': {
101+
from: {
102+
height: 'var(--radix-accordion-content-height)'
103+
},
104+
to: {
105+
height: '0'
106+
}
107+
}
108+
},
109+
animation: {
110+
'accordion-down': 'accordion-down 0.2s ease-out',
111+
'accordion-up': 'accordion-up 0.2s ease-out'
112+
},
95113
// Tight Markdown Theme
96-
typography: ({ theme }: { theme: any }) => ({
114+
typography: ({ theme }: { theme: any }) => ({
97115
tight: {
98116
css: {
99117
'--tw-prose-body': {
@@ -130,11 +148,11 @@ const config = {
130148
},
131149
},
132150
}),
133-
}
151+
}
134152
},
135153
plugins: [
136-
require("tailwindcss-animate"),
137-
require('@tailwindcss/typography'),
154+
require("tailwindcss-animate"),
155+
require('@tailwindcss/typography'),
138156
],
139157
} satisfies Config
140158

0 commit comments

Comments
 (0)