1import type { Config } from 'tailwindcss';
2import * as defaultTheme from 'tailwindcss/defaultTheme';
3
4const config = {
5 corePlugins: {
6 preflight: false,
7 container: false,
8 },
9 important: '.tailwind',
10 content: ['./src/**/*.{js,ts,jsx,tsx}'],
11 darkMode: ['class', '[data-mode="dark"]'],
12 theme: {
13 extend: {
14 colors: {
15 border: 'hsl(var(--border))',
16 input: 'hsl(var(--input))',
17 ring: 'hsl(var(--ring))',
18 background: 'hsl(var(--background))',
19 foreground: 'hsl(var(--foreground))',
20 primary: {
21 DEFAULT: 'hsl(var(--primary))',
22 foreground: 'hsl(var(--primary-foreground))',
23 '100': 'hsla(35, 95%, 92%, 1)',
24 '200': 'hsla(35, 100%, 86%, 1)',
25 '400': 'hsla(27, 91%, 61%, 1)',
26 '500': 'hsla(25, 90%, 54%, 1)',
27 '600': 'hsla(21, 85%, 48%, 1)',
28 '700': 'hsla(17, 83%, 40%, 1)',
29 },
30 alpha: {
31 DEFAULT: 'hsla(0, 0%, 0%, 0)',
32 foreground: 'hsla(0, 0%, 0%, 1)',
33 '50': 'hsla(0, 0%, 0%, 0.04)',
34 '100': 'hsla(0, 0%, 0%, 0.08)',
35 '150': 'hsla(0, 0%, 0%, 0.12)',
36 '300': 'hsla(0, 0%, 0%, 0.32)',
37 '700': 'hsla(0, 0%, 0%, 0.72)',
38 '800': 'hsla(0, 0%, 0%, 0.8)',
39 '900': 'hsla(0, 0%, 0%, 1)',
40 },
41 neutral: {
42 DEFAULT: 'hsla(0, 0%, 100%, 1)',
43 foreground: 'hsla(0, 0%, 0%, 1)',
44 '50': 'hsla(60, 5%, 96%, 1)',
45 '400': 'hsla(0, 0%, 64%, 1)',
46 '600': 'hsla(0, 0%, 32%, 1)',
47 },
48 red: {
49 '400': 'hsla(0, 86%, 63%, 1)',
50 },
51 green: {
52 '400': 'hsla(85, 59%, 58%, 1)',
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 },
79 fontFamily: {
80 sans: ['Open Sans', ...defaultTheme.fontFamily.sans],
81 mono: ['Roboto Mono', ...defaultTheme.fontFamily.mono],
82 },
83 boxShadow: {
84 'button-hover': '0px -4px 8px 0px rgba(246, 147, 65, 0.40)',
85 box: '0px -8px 16px 0px rgba(0, 0, 0, 0.04)',
86 code: '0px -8px 24px 0px var(--Primary-100, #FEEDD6)',
87 },
88 fontSize: {
89 lg: [
90 '1.125rem',
91 {
92 lineHeight: '1.5rem',
93 },
94 ],
95 '3xl': [
96 '2rem',
97 {
98 lineHeight: '2.5rem',
99 },
100 ],
101 '4xl': [
102 '2.5rem',
103 {
104 lineHeight: '3.5rem',
105 },
106 ],
107 '6xl': [
108 '4rem',
109 {
110 lineHeight: '4.5rem',
111 },
112 ],
113 },
114 borderRadius: {
115 lg: 'var(--radius)',
116 md: 'calc(var(--radius) - 2px)',
117 sm: 'calc(var(--radius) - 4px)',
118 },
119 keyframes: {
120 'accordion-down': {
121 from: { height: '0' },
122 to: { height: 'var(--radix-accordion-content-height)' },
123 },
124 'accordion-up': {
125 from: { height: 'var(--radix-accordion-content-height)' },
126 to: { height: '0' },
127 },
128 },
129 animation: {
130 'accordion-down': 'accordion-down 0.2s ease-out',
131 'accordion-up': 'accordion-up 0.2s ease-out',
132 },
133 },
134 },
135 plugins: [require('tailwindcss-animate')],
136} satisfies Config;
137
138export default config;
139
1import type { Config } from 'tailwindcss';
2import * as defaultTheme from 'tailwindcss/defaultTheme';
3
4const config = {
5 corePlugins: {
6 preflight: false,
7 container: false,
8 },
9 important: '.tailwind',
10 content: ['./src/**/*.{js,ts,jsx,tsx}'],
11 darkMode: ['class', '[data-mode="dark"]'],
12 theme: {
13 extend: {
14 colors: {
15 border: 'hsl(var(--border))',
16 input: 'hsl(var(--input))',
17 ring: 'hsl(var(--ring))',
18 background: 'hsl(var(--background))',
19 foreground: 'hsl(var(--foreground))',
20 primary: {
21 DEFAULT: 'hsl(var(--primary))',
22 foreground: 'hsl(var(--primary-foreground))',
23 '100': 'hsla(35, 95%, 92%, 1)',
24 '200': 'hsla(35, 100%, 86%, 1)',
25 '400': 'hsla(27, 91%, 61%, 1)',
26 '500': 'hsla(25, 90%, 54%, 1)',
27 '600': 'hsla(21, 85%, 48%, 1)',
28 '700': 'hsla(17, 83%, 40%, 1)',
29 },
30 alpha: {
31 DEFAULT: 'hsla(0, 0%, 0%, 0)',
32 foreground: 'hsla(0, 0%, 0%, 1)',
33 '50': 'hsla(0, 0%, 0%, 0.04)',
34 '100': 'hsla(0, 0%, 0%, 0.08)',
35 '150': 'hsla(0, 0%, 0%, 0.12)',
36 '300': 'hsla(0, 0%, 0%, 0.32)',
37 '700': 'hsla(0, 0%, 0%, 0.72)',
38 '800': 'hsla(0, 0%, 0%, 0.8)',
39 '900': 'hsla(0, 0%, 0%, 1)',
40 },
41 neutral: {
42 DEFAULT: 'hsla(0, 0%, 100%, 1)',
43 foreground: 'hsla(0, 0%, 0%, 1)',
44 '50': 'hsla(60, 5%, 96%, 1)',
45 '400': 'hsla(0, 0%, 64%, 1)',
46 '600': 'hsla(0, 0%, 32%, 1)',
47 },
48 red: {
49 '400': 'hsla(0, 86%, 63%, 1)',
50 },
51 green: {
52 '400': 'hsla(85, 59%, 58%, 1)',
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 },
79 fontFamily: {
80 sans: ['Open Sans', ...defaultTheme.fontFamily.sans],
81 mono: ['Roboto Mono', ...defaultTheme.fontFamily.mono],
82 },
83 boxShadow: {
84 'button-hover': '0px -4px 8px 0px rgba(246, 147, 65, 0.40)',
85 box: '0px -8px 16px 0px rgba(0, 0, 0, 0.04)',
86 code: '0px -8px 24px 0px var(--Primary-100, #FEEDD6)',
87 },
88 fontSize: {
89 lg: [
90 '1.125rem',
91 {
92 lineHeight: '1.5rem',
93 },
94 ],
95 '3xl': [
96 '2rem',
97 {
98 lineHeight: '2.5rem',
99 },
100 ],
101 '4xl': [
102 '2.5rem',
103 {
104 lineHeight: '3.5rem',
105 },
106 ],
107 '6xl': [
108 '4rem',
109 {
110 lineHeight: '4.5rem',
111 },
112 ],
113 },
114 borderRadius: {
115 lg: 'var(--radius)',
116 md: 'calc(var(--radius) - 2px)',
117 sm: 'calc(var(--radius) - 4px)',
118 },
119 keyframes: {
120 'accordion-down': {
121 from: { height: '0' },
122 to: { height: 'var(--radix-accordion-content-height)' },
123 },
124 'accordion-up': {
125 from: { height: 'var(--radix-accordion-content-height)' },
126 to: { height: '0' },
127 },
128 },
129 animation: {
130 'accordion-down': 'accordion-down 0.2s ease-out',
131 'accordion-up': 'accordion-up 0.2s ease-out',
132 },
133 },
134 },
135 plugins: [require('tailwindcss-animate')],
136} satisfies Config;
137
138export default config;
139