Skip to content

Commit 473383a

Browse files
sunnamed434sunnamed434
committed
Upgrade tailwind
1 parent 3d5be17 commit 473383a

File tree

4 files changed

+868
-88
lines changed

4 files changed

+868
-88
lines changed

‎src/app/globals.css‎

Lines changed: 147 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,155 +1,222 @@
1-
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
1+
@import 'tailwindcss';
42

5-
@reference {
6-
@import "tailwindcss";
3+
@theme {
4+
--background-image-gradient-radial: radial-gradient(var(--tw-gradient-stops));
5+
--background-image-gradient-conic: conic-gradient(
6+
from 180deg at 50% 50%,
7+
var(--tw-gradient-stops)
8+
);
9+
10+
--radius-lg: var(--radius);
11+
--radius-md: calc(var(--radius) - 2px);
12+
--radius-sm: calc(var(--radius) - 4px);
13+
14+
--color-background: hsl(var(--background));
15+
--color-foreground: hsl(var(--foreground));
16+
17+
--color-card: hsl(var(--card));
18+
--color-card-foreground: hsl(var(--card-foreground));
19+
20+
--color-popover: hsl(var(--popover));
21+
--color-popover-foreground: hsl(var(--popover-foreground));
22+
23+
--color-primary: hsl(var(--primary));
24+
--color-primary-foreground: hsl(var(--primary-foreground));
25+
26+
--color-secondary: hsl(var(--secondary));
27+
--color-secondary-foreground: hsl(var(--secondary-foreground));
28+
29+
--color-muted: hsl(var(--muted));
30+
--color-muted-foreground: hsl(var(--muted-foreground));
31+
32+
--color-accent: hsl(var(--accent));
33+
--color-accent-foreground: hsl(var(--accent-foreground));
34+
35+
--color-destructive: hsl(var(--destructive));
36+
--color-destructive-foreground: hsl(var(--destructive-foreground));
37+
38+
--color-border: hsl(var(--border));
39+
--color-input: hsl(var(--input));
40+
--color-ring: hsl(var(--ring));
41+
42+
--color-chart-1: hsl(var(--chart-1));
43+
--color-chart-2: hsl(var(--chart-2));
44+
--color-chart-3: hsl(var(--chart-3));
45+
--color-chart-4: hsl(var(--chart-4));
46+
--color-chart-5: hsl(var(--chart-5));
747
}
848

9-
@keyframes slideInUp {
49+
/*
50+
The default border color has changed to `currentcolor` in Tailwind CSS v4,
51+
so we've added these compatibility styles to make sure everything still
52+
looks the same as it did with Tailwind CSS v3.
53+
54+
If we ever want to remove these styles, we need to add an explicit border
55+
color utility to any element that depends on these defaults.
56+
*/
57+
@layer base {
58+
*,
59+
::after,
60+
::before,
61+
::backdrop,
62+
::file-selector-button {
63+
border-color: var(--color-gray-200, currentcolor);
64+
}
65+
}
66+
67+
@utility text-balance {
68+
text-wrap: balance;
69+
}
70+
71+
@layer utilities {
72+
@reference {
73+
@import 'tailwindcss';
74+
}
75+
76+
@keyframes slideInUp {
1077
from {
11-
opacity: 0;
12-
transform: translateY(30px);
78+
opacity: 0;
79+
transform: translateY(30px);
1380
}
1481
to {
15-
opacity: 1;
16-
transform: translateY(0);
82+
opacity: 1;
83+
transform: translateY(0);
1784
}
18-
}
85+
}
1986

20-
@keyframes slideInLeft {
87+
@keyframes slideInLeft {
2188
from {
22-
opacity: 0;
23-
transform: translateX(-30px);
89+
opacity: 0;
90+
transform: translateX(-30px);
2491
}
2592
to {
26-
opacity: 1;
27-
transform: translateX(0);
93+
opacity: 1;
94+
transform: translateX(0);
2895
}
29-
}
96+
}
3097

31-
@keyframes slideInRight {
98+
@keyframes slideInRight {
3299
from {
33-
opacity: 0;
34-
transform: translateX(30px);
100+
opacity: 0;
101+
transform: translateX(30px);
35102
}
36103
to {
37-
opacity: 1;
38-
transform: translateX(0);
104+
opacity: 1;
105+
transform: translateX(0);
39106
}
40-
}
107+
}
41108

42-
@keyframes fadeInUp {
109+
@keyframes fadeInUp {
43110
from {
44-
opacity: 0;
45-
transform: translateY(20px);
111+
opacity: 0;
112+
transform: translateY(20px);
46113
}
47114
to {
48-
opacity: 1;
49-
transform: translateY(0);
115+
opacity: 1;
116+
transform: translateY(0);
50117
}
51-
}
118+
}
52119

53-
@keyframes bounceIn {
120+
@keyframes bounceIn {
54121
0% {
55-
opacity: 0;
56-
transform: scale(0.3);
122+
opacity: 0;
123+
transform: scale(0.3);
57124
}
58125
50% {
59-
opacity: 1;
60-
transform: scale(1.05);
126+
opacity: 1;
127+
transform: scale(1.05);
61128
}
62129
70% {
63-
transform: scale(0.9);
130+
transform: scale(0.9);
64131
}
65132
100% {
66-
opacity: 1;
67-
transform: scale(1);
133+
opacity: 1;
134+
transform: scale(1);
68135
}
69-
}
136+
}
70137

71-
.animate-slideInUp {
138+
.animate-slideInUp {
72139
animation: slideInUp 0.8s ease-out forwards;
73-
}
140+
}
74141

75-
.animate-slideInLeft {
142+
.animate-slideInLeft {
76143
animation: slideInLeft 0.8s ease-out forwards;
77-
}
144+
}
78145

79-
.animate-slideInRight {
146+
.animate-slideInRight {
80147
animation: slideInRight 0.8s ease-out forwards;
81-
}
148+
}
82149

83-
.animate-fadeInUp {
150+
.animate-fadeInUp {
84151
animation: fadeInUp 1s ease-out 0.5s forwards;
85-
}
152+
}
86153

87-
.animate-bounceIn {
154+
.animate-bounceIn {
88155
animation: bounceIn 0.8s ease-out forwards;
89-
}
156+
}
90157

91-
/* Smooth scroll behavior */
92-
html {
158+
/* Smooth scroll behavior */
159+
html {
93160
scroll-behavior: smooth;
94-
}
161+
}
95162

96-
/* Custom scrollbar */
97-
::-webkit-scrollbar {
163+
/* Custom scrollbar */
164+
::-webkit-scrollbar {
98165
width: 8px;
99-
}
166+
}
100167

101-
::-webkit-scrollbar-track {
168+
::-webkit-scrollbar-track {
102169
background: rgba(30, 41, 59, 0.5);
103-
}
170+
}
104171

105-
::-webkit-scrollbar-thumb {
172+
::-webkit-scrollbar-thumb {
106173
background: linear-gradient(to bottom, #8b5cf6, #ec4899);
107174
border-radius: 4px;
108-
}
175+
}
109176

110-
::-webkit-scrollbar-thumb:hover {
177+
::-webkit-scrollbar-thumb:hover {
111178
background: linear-gradient(to bottom, #7c3aed, #db2777);
112-
}
179+
}
113180

114-
/* Glow effect for buttons */
115-
.glow-on-hover {
181+
/* Glow effect for buttons */
182+
.glow-on-hover {
116183
position: relative;
117184
overflow: hidden;
118-
}
185+
}
119186

120-
.glow-on-hover::before {
187+
.glow-on-hover::before {
121188
content: '';
122189
position: absolute;
123190
top: 0;
124191
left: -100%;
125192
width: 100%;
126193
height: 100%;
127-
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
194+
background: linear-gradient(
195+
90deg,
196+
transparent,
197+
rgba(255, 255, 255, 0.2),
198+
transparent
199+
);
128200
transition: left 0.5s;
129-
}
201+
}
130202

131-
.glow-on-hover:hover::before {
203+
.glow-on-hover:hover::before {
132204
left: 100%;
133-
}
205+
}
134206

135-
:root {
207+
:root {
136208
--foreground-rgb: 0, 0, 0;
137209
--background-start-rgb: 214, 219, 220;
138210
--background-end-rgb: 255, 255, 255;
139-
}
211+
}
140212

141-
@media (prefers-color-scheme: dark) {
213+
@media (prefers-color-scheme: dark) {
142214
:root {
143-
--foreground-rgb: 255, 255, 255;
144-
--background-start-rgb: 0, 0, 0;
145-
--background-end-rgb: 0, 0, 0;
146-
}
147-
}
148-
149-
@layer utilities {
150-
.text-balance {
151-
text-wrap: balance;
215+
--foreground-rgb: 255, 255, 255;
216+
--background-start-rgb: 0, 0, 0;
217+
--background-end-rgb: 0, 0, 0;
152218
}
219+
}
153220
}
154221

155222
@layer base {

‎src/next-env.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/// <reference types="next" />
22
/// <reference types="next/image-types/global" />
3+
/// <reference path="./.next/types/routes.d.ts" />
34

45
// NOTE: This file should not be edited
56
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

0 commit comments

Comments
 (0)