-
Notifications
You must be signed in to change notification settings - Fork 14
/
tailwind.config.js
78 lines (75 loc) · 2.06 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
/* eslint-env node */
const plugin = require("tailwindcss/plugin");
module.exports = {
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
darkMode: "class", // or 'media' or 'class'
theme: {
asideScrollbars: {
light: "light",
gray: "gray",
},
extend: {
zIndex: {
"-1": "-1",
},
flexGrow: {
5: "5",
},
maxHeight: {
"screen-menu": "calc(100vh - 3.5rem)",
modal: "calc(100vh - 160px)",
},
transitionProperty: {
position: "right, left, top, bottom, margin, padding",
textColor: "color",
},
keyframes: {
"fade-out": {
from: { opacity: 1 },
to: { opacity: 0 },
},
"fade-in": {
from: { opacity: 0 },
to: { opacity: 1 },
},
},
animation: {
"fade-out": "fade-out 250ms ease-in-out",
"fade-in": "fade-in 250ms ease-in-out",
},
},
},
plugins: [
require("@tailwindcss/forms"),
plugin(function ({ matchUtilities, theme }) {
matchUtilities(
{
"aside-scrollbars": (value) => {
const track = value === "light" ? "100" : "900";
const thumb = value === "light" ? "300" : "600";
const color = value === "light" ? "gray" : value;
return {
scrollbarWidth: "thin",
scrollbarColor: `${theme(`colors.${color}.${thumb}`)} ${theme(
`colors.${color}.${track}`
)}`,
"&::-webkit-scrollbar": {
width: "8px",
height: "8px",
},
"&::-webkit-scrollbar-track": {
backgroundColor: theme(`colors.${color}.${track}`),
},
"&::-webkit-scrollbar-thumb": {
borderRadius: "0.25rem",
backgroundColor: theme(`colors.${color}.${thumb}`),
},
};
},
},
{ values: theme("asideScrollbars") }
);
}),
require("@tailwindcss/line-clamp"),
],
};