-
-
Notifications
You must be signed in to change notification settings - Fork 12
/
tailwind.config.ts
87 lines (85 loc) · 2.42 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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import typography from '@tailwindcss/typography';
import type { Config } from 'tailwindcss';
const config: Config = {
content: [
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
'./blog/**/*.mdx',
],
theme: {
extend: {
colors: {
orange: {
50: '#fff8f3',
100: '#ffe8d8',
200: '#ffc59b',
300: '#fc9c66',
400: '#fd812d',
500: '#f35815',
600: '#b83a05',
700: '#962d00',
800: '#672002',
900: '#3c1403',
950: '#240b00',
},
},
fontFamily: {
sans: ['var(--font-geist-sans)'],
mono: ['var(--font-geist-mono)'],
},
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic':
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
},
typography: (theme: (path: string) => string) => ({
DEFAULT: {
css: {
color: theme('colors.neutral.600'),
letterSpacing: '-0.01em',
a: {
color: theme('colors.orange.500'),
transition: 'color 0.2s ease',
'&:hover': {
color: theme('colors.orange.600'),
},
},
'h1, h2, h3, h4, h5, h6': {
fontWeight: theme('fontWeight.semibold'),
letterSpacing: '-0.02em',
},
pre: {
padding: theme('spacing.6'),
backgroundColor: 'inherit',
borderWidth: 1,
borderColor: 'inherit',
borderRadius: theme('borderRadius.lg'),
},
},
},
invert: {
css: {
color: theme('colors.neutral.400'),
},
},
}),
animation: {
wave: 'wave-animation 2.5s infinite',
},
keyframes: {
'wave-animation': {
'0%': { transform: 'rotate(0.0deg)' },
'10%': { transform: 'rotate(14.0deg)' },
'20%': { transform: 'rotate(-8.0deg)' },
'30%': { transform: 'rotate(14.0deg)' },
'40%': { transform: 'rotate(-4.0deg)' },
'50%': { transform: 'rotate(10.0deg)' },
'60%': { transform: 'rotate(0.0deg)' },
'100%': { transform: 'rotate(0.0deg)' },
},
},
},
},
plugins: [typography],
};
export default config;