-
Notifications
You must be signed in to change notification settings - Fork 0
/
tailwind.config.js
executable file
·96 lines (92 loc) · 2.24 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
const plugin = require('tailwindcss/plugin');
module.exports = {
darkMode: 'class',
variants: {
typography: ['dark'],
extend: {
// ...
translate: ['dark'],
}
},
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
corePlugins: {
container: false
},
theme: {
fontFamily: {
'sans' : ['Inter','sans-serif'],
'serif' : ['Lora','serif'],
'jost' : ['Jost','sans-serif'],
},
container: {
padding: {
DEFAULT: '1rem',
sm: '2rem',
lg: '4rem',
xl: '5rem',
'2xl': '6rem',
},
},
extend: {
animation: {
wiggle: 'wiggle 3s ease-in-out infinite',
bounce: 'bounce 2s ease-in-out infinite',
fadein: 'fadein 200ms linear',
objtoright: 'objtoright 10s alternate infinite'
},
keyframes: {
wiggle: {
'0%, 100%': { transform: 'rotate(-4deg)' },
'50%': { transform: 'rotate(4deg)' },
},
fadein: {
'0%': { transform: 'translateY(-100%)'},
'100%': { transform: 'translateY(0)'},
},
objtoright: {
'0%': { 'object-position': 'top left'},
'100%': { 'object-position': 'top right'},
}
}
},
},
plugins: [
require('@tailwindcss/typography'),
require("tailwindcss-animation-delay"),
plugin(function ({ addVariant, e, postcss, addComponents }) {
addComponents({
'.container': {
maxWidth: '80%',
'@screen sm': {
maxWidth: '640px',
},
'@screen md': {
maxWidth: '768px',
},
'@screen lg': {
maxWidth: '800px',
},
'@screen xl': {
maxWidth: '860px',
},
}
}),
addVariant('firefox', ({ container, separator }) => {
const isFirefoxRule = postcss.atRule({
name: '-moz-document',
params: 'url-prefix()',
});
isFirefoxRule.append(container.nodes);
container.append(isFirefoxRule);
isFirefoxRule.walkRules((rule) => {
rule.selector = `.${e(
`firefox${separator}${rule.selector.slice(1)}`
)}`;
});
});
}),
],
}