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
|
/* 1) Load Tailwind first */
@import "tailwindcss";
@tailwind base;
@tailwind components;
@tailwind utilities;
/* 2) Register DaisyUI themes */
@plugin "daisyui" {
themes:
lofi --default,
black --prefersdark;
}
@plugin "daisyui/theme" {
name: "lofi";
default: true;
--gradient: #c3cfe2;
--color-error: #b91c1c;
}
@plugin "daisyui/theme" {
name: "black";
prefersdark: true;
--gradient: #c3cfe2;
--color-secondary: #ccc;
--color-error: #f87171;
}
/* 3) Tell Tailwind which layers we’ll @apply from */
@reference utilities;
@reference components;
/* 4) Now your custom CSS that uses @apply */
.btn-menu {
@apply flex justify-center items-center bg-base-100 p-2 rounded-full
w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl;
}
:root {
--toastContainerTop: auto;
--toastContainerRight: auto;
--toastContainerBottom: 8rem;
--toastContainerLeft: calc(50vw - 8rem);
--toastBackground: #292929;
}
html {
font-family: system-ui, sans-serif;
}
::selection {
color: black;
background: #eaf2ff;
}
:fullscreen {
background-color: white;
}
/* Note: @apply-ing DaisyUI component classes requires components reference */
.input {
@apply input-lg input-primary h-16 px-4;
}
/* If you want to *turn* native inputs into DaisyUI inputs via @apply: */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"] {
@apply input input-lg input-primary h-16 px-4;
}
textarea {
@apply textarea textarea-lg textarea-primary py-4;
}
select {
@apply select select-lg select-primary h-16 px-4;
}
input:not([type="range"]),
textarea,
select,
.input {
@apply rounded-lg w-full;
}
input.clean,
textarea.clean {
border: none !important;
outline: none !important;
padding: 0 !important;
margin: 0 !important;
background: none !important;
box-shadow: none !important;
}
button {
cursor: pointer !important;
}
.btn {
@apply rounded-lg btn-lg btn-block outline-none h-16 cursor-pointer;
}
.grecaptcha-badge {
visibility: hidden !important;
}
@layer components {
:where(input, textarea, select, .input, .textarea, .select) {
outline-offset: 0 !important;
}
}
|
