-
Notifications
You must be signed in to change notification settings - Fork 0
/
tailwind.config.js
127 lines (126 loc) · 3.74 KB
/
tailwind.config.js
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
const colors = require('tailwindcss/colors')
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: 'class',
content: ['./app/**/*.{ts,tsx,jsx,js}'],
theme: {
container: {
center: true,
padding: '2rem',
screens: {
'2xl': '1400px',
},
},
fontFamily: {
sans: [
'Inter',
'-apple-system',
'BlinkMacSystemFont',
'Segoe UI',
'Roboto',
'Oxygen',
'Ubuntu',
'Cantarell',
'Fira Sans',
'Droid Sans',
'Helvetica Neue',
'sans-serif',
],
serif: ['Bodoni Moda', 'serif'],
mono: [
'Hack',
'Menlo',
'Monaco',
'Lucida Console',
'Liberation Mono',
'DejaVu Sans Mono',
'Bitstream Vera Sans Mono',
'Courier New',
'monospace',
],
},
extend: {
aspectRatio: {
person: '9 / 16',
product: '4 / 5',
},
fontSize: {
'xs': ['0.8125rem', '1.0625rem'],
'2xs': ['0.75rem', '1rem'],
'3xs': ['0.6875rem', '0.75625rem'],
},
borderRadius: {
sm: '0.1875rem',
xs: '0.125rem',
},
maxWidth: { '2xs': '6.25rem' },
colors: { gray: colors.zinc },
spacing: {
'1.25': '0.3125rem',
'6.5': '1.625rem',
'5/4': '125%',
},
keyframes: {
// Tooltip (tailwindcss-radix)
'slide-up-fade': {
'0%': { opacity: 0, transform: 'translateY(2px)' },
'100%': { opacity: 1, transform: 'translateY(0)' },
},
'slide-right-fade': {
'0%': { opacity: 0, transform: 'translateX(-2px)' },
'100%': { opacity: 1, transform: 'translateX(0)' },
},
'slide-down-fade': {
'0%': { opacity: 0, transform: 'translateY(-2px)' },
'100%': { opacity: 1, transform: 'translateY(0)' },
},
'slide-left-fade': {
'0%': { opacity: 0, transform: 'translateX(2px)' },
'100%': { opacity: 1, transform: 'translateX(0)' },
},
// Accordion (shadcn-ui)
'accordion-down': {
from: { height: 0 },
to: { height: 'var(--radix-accordion-content-height)' },
},
'accordion-up': {
from: { height: 'var(--radix-accordion-content-height)' },
to: { height: 0 },
},
// Loading (cmdk)
// @see {@link https://github.com/pacocoursey/cmdk/blob/main/website/styles/cmdk/raycast.scss#L348}
'load': {
'0%': { opacity: 0, transform: 'translateX(0)' },
'50%': { opacity: 1, transform: 'translateX(100%)' },
'100%': { opacity: 0, transform: 'translateX(0)' },
},
// Fade (gradually fade component in on mount)
'fade-in': {
'0%': { opacity: 0 },
'100%': { opacity: 1 },
},
},
animation: {
// Tooltip (tailwindcss-radix)
'slide-up-fade': 'slide-up-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
'slide-right-fade':
'slide-right-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
'slide-down-fade': 'slide-down-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
'slide-left-fade': 'slide-left-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
// Accordion (shadcn-ui)
'accordion-down': 'accordion-down 0.2s ease-out',
'accordion-up': 'accordion-up 0.2s ease-out',
// Loading (cmdk)
'load': 'load 1.5s ease infinite',
'shine': 'load 1.5s ease',
// Fade (gradually fade component in on mount)
'fade-in': 'fade-in 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
},
},
},
plugins: [
require('tailwindcss-animate'),
require('tailwindcss-radix'),
require('@tailwindcss/typography'),
],
}