The Node.js® Website
keii.dev
1import type { Config } from 'tailwindcss';
2
3export default {
4 content: [
5 './pages/**/*.{tsx,mdx}',
6 './components/**/*.tsx',
7 './providers/**/*.tsx',
8 './layouts/**/*.tsx',
9 './.storybook/preview.tsx',
10 './.storybook/main.ts',
11 './app/**/*.tsx',
12 ],
13 theme: {
14 colors: {
15 green: {
16 100: '#EDF2EB',
17 200: '#C5E5B4',
18 300: '#99CC7D',
19 400: '#84BA64',
20 500: '#5FA04E',
21 600: '#417E38',
22 700: '#2C682C',
23 800: '#2C682C',
24 900: '#1A3F1D',
25 },
26 neutral: {
27 100: '#F6F7F9',
28 200: '#E9EDF0',
29 300: '#D9E1E4',
30 400: '#CBD4D9',
31 500: '#B1BCC2',
32 600: '#929FA5',
33 700: '#6E7B83',
34 800: '#556066',
35 900: '#2C3437',
36 950: '#0D121C',
37 },
38 danger: {
39 100: '#FBF1F0',
40 200: '#FAD3D4',
41 300: '#FAB6B7',
42 400: '#FA8E8E',
43 500: '#F65354',
44 600: '#DE1A1B',
45 700: '#B80C0C',
46 800: '#900E0E',
47 900: '#661514',
48 },
49 warning: {
50 100: '#FDF3E7',
51 200: '#FAD9B0',
52 300: '#F5BC75',
53 400: '#E99C40',
54 500: '#D07912',
55 600: '#AE5F00',
56 700: '#8B4D04',
57 800: '#683D08',
58 900: '#4D2F0B',
59 },
60 info: {
61 100: '#E9F4FA',
62 200: '#BCE6FC',
63 300: '#8ED4F8',
64 400: '#52BAED',
65 500: '#229AD6',
66 600: '#0C7BB3',
67 700: '#066291',
68 800: '#074D71',
69 900: '#0A3953',
70 },
71 accent1: {
72 100: '#F7F1FB',
73 200: '#EAD9FB',
74 300: '#DBBDF9',
75 400: '#C79BF2',
76 500: '#AF74E8',
77 600: '#9756D6',
78 700: '#7D3CBE',
79 800: '#642B9E',
80 900: '#361B52',
81 },
82 accent2: {
83 100: '#FBF0F4',
84 200: '#FBD4E6',
85 300: '#FBB4D2',
86 400: '#F68BB7',
87 500: '#ED5393',
88 600: '#D6246E',
89 700: '#B01356',
90 800: '#8B1245',
91 900: '#411526',
92 },
93 white: '#FFFFFF',
94 transparent: 'transparent',
95 shadow: '#101828',
96 },
97 fontSize: {
98 xs: ['0.75rem', '1rem'],
99 sm: ['0.875rem', '1.25rem'],
100 base: ['1rem', '1.5rem'],
101 lg: ['1.125rem', '1.75rem'],
102 xl: ['1.25rem', '1.875rem'],
103 '2xl': ['1.5rem', '2rem'],
104 '3xl': ['1.875rem', '2.25rem'],
105 '4xl': ['2.25rem', '2.5rem'],
106 '5xl': ['3rem', '3rem'],
107 '6xl': ['3.75rem', '3.75rem'],
108 '7xl': ['4.5rem', '4.5rem'],
109 },
110 fontWeight: {
111 regular: '400',
112 medium: '500',
113 semibold: '600',
114 bold: '700',
115 },
116 fontFamily: {
117 'open-sans': ['var(--font-open-sans)'],
118 'ibm-plex-mono': ['var(--font-ibm-plex-mono)'],
119 },
120 extend: {
121 screens: { xs: { max: '670px', min: '0px' } },
122 backgroundImage: {
123 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
124 'gradient-subtle':
125 'linear-gradient(180deg, theme(colors.neutral.100 / 50%) 0%, theme(colors.neutral.100 / 0%) 48.32%)',
126 'gradient-subtle-dark':
127 'linear-gradient(180deg, theme(colors.neutral.900 / 50%) 0%, theme(colors.neutral.900 / 0%) 48.32%)',
128 'gradient-subtle-gray':
129 'linear-gradient(180deg, theme(colors.neutral.900) 0%, theme(colors.neutral.900 / 80%) 100%)',
130 'gradient-subtle-white':
131 'linear-gradient(180deg, theme(colors.white) 0%, theme(colors.white / 80%) 100%)',
132 'gradient-glow-backdrop':
133 'radial-gradient(8em circle at calc(50%) 10px, theme(colors.green.500), transparent 30%)',
134 },
135 boxShadow: {
136 xs: '0px 1px 2px 0px theme(colors.shadow / 5%)',
137 lg: '0px 4px 6px -2px theme(colors.shadow / 3%), 0px 12px 16px -4px theme(colors.shadow / 8%)',
138 },
139 spacing: { '4.5': '1.125rem', '18': '4.5rem' },
140 aria: { current: 'current="page"' },
141 maxWidth: { '8xl': '95rem' },
142 },
143 },
144 darkMode: ['class', '[data-theme="dark"]'],
145 plugins: [
146 require('@savvywombat/tailwindcss-grid-areas'),
147 require('@tailwindcss/container-queries'),
148 ],
149} satisfies Config;