forked from creativetimofficial/notus-nextjs
-
Notifications
You must be signed in to change notification settings - Fork 0
/
tailwind.config.js
114 lines (114 loc) · 2.51 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
const plugin = require("tailwindcss/plugin");
const colors = require("tailwindcss/colors");
module.exports = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', './layouts/**/*.{js,ts,jsx,tsx}'],
theme: {
colors: {
...colors,
},
extend: {
minHeight: {
"screen-75": "75vh",
},
fontSize: {
55: "55rem",
},
opacity: {
80: ".8",
},
zIndex: {
2: 2,
3: 3,
},
inset: {
"-100": "-100%",
"-225-px": "-225px",
"-160-px": "-160px",
"-150-px": "-150px",
"-94-px": "-94px",
"-50-px": "-50px",
"-29-px": "-29px",
"-20-px": "-20px",
"25-px": "25px",
"40-px": "40px",
"95-px": "95px",
"145-px": "145px",
"195-px": "195px",
"210-px": "210px",
"260-px": "260px",
},
height: {
"95-px": "95px",
"70-px": "70px",
"350-px": "350px",
"500-px": "500px",
"600-px": "600px",
},
maxHeight: {
"860-px": "860px",
},
maxWidth: {
"100-px": "100px",
"120-px": "120px",
"150-px": "150px",
"180-px": "180px",
"200-px": "200px",
"210-px": "210px",
"580-px": "580px",
},
minWidth: {
"140-px": "140px",
48: "12rem",
},
backgroundSize: {
full: "100%",
},
},
},
plugins: [
require("@tailwindcss/forms"),
plugin(function ({ addComponents, theme }) {
const screens = theme("screens", {});
addComponents([
{
".container": { width: "100%" },
},
{
[`@media (min-width: ${screens.sm})`]: {
".container": {
"max-width": "640px",
},
},
},
{
[`@media (min-width: ${screens.md})`]: {
".container": {
"max-width": "768px",
},
},
},
{
[`@media (min-width: ${screens.lg})`]: {
".container": {
"max-width": "1024px",
},
},
},
{
[`@media (min-width: ${screens.xl})`]: {
".container": {
"max-width": "1280px",
},
},
},
{
[`@media (min-width: ${screens["2xl"]})`]: {
".container": {
"max-width": "1280px",
},
},
},
]);
}),
],
};