Skip to content

Commit d0ceff5

Browse files
osorionicolasosorionicolas
committed
upgrade to tailwindcss 4
1 parent 41c5cbd commit d0ceff5

20 files changed

+448
-464
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,11 @@
2424
"@serwist/next": "^8.4.3",
2525
"@serwist/precaching": "^8.4.3",
2626
"@serwist/sw": "^8.4.3",
27+
"@tailwindcss/postcss": "^4.0.0",
2728
"@tanstack/react-query": "^5.66.3",
2829
"@testing-library/jest-dom": "^4.2.4",
2930
"@testing-library/react": "^9.5.0",
3031
"@testing-library/user-event": "^7.2.1",
31-
"autoprefixer": "^10.4.16",
3232
"class-variance-authority": "^0.7.0",
3333
"clsx": "^2.0.0",
3434
"cmdk": "^0.2.0",
@@ -45,7 +45,7 @@
4545
"react": "^18.2.0",
4646
"react-dom": "^18.2.0",
4747
"tailwind-merge": "^2.2.0",
48-
"tailwindcss": "^3.4.0",
48+
"tailwindcss": "^4.0.0",
4949
"tailwindcss-animate": "^1.0.7"
5050
},
5151
"devDependencies": {

‎pnpm-lock.yaml‎

Lines changed: 290 additions & 309 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎postcss.config.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
module.exports = {
22
plugins: {
3-
tailwindcss: {},
4-
autoprefixer: {},
3+
'@tailwindcss/postcss': {},
54
},
65
}

‎src/app/globals.css‎

Lines changed: 136 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,109 @@
1-
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
4-
1+
@import 'tailwindcss';
2+
3+
@plugin 'tailwindcss-animate';
4+
5+
@custom-variant dark (&:is(.dark *));
6+
7+
@theme {
8+
--color-border: hsl(var(--border));
9+
--color-input: hsl(var(--input));
10+
--color-ring: hsl(var(--ring));
11+
--color-background: hsl(var(--background));
12+
--color-foreground: hsl(var(--foreground));
13+
14+
--color-primary: hsl(var(--primary));
15+
--color-primary-foreground: hsl(var(--primary-foreground));
16+
17+
--color-secondary: hsl(var(--secondary));
18+
--color-secondary-foreground: hsl(var(--secondary-foreground));
19+
20+
--color-destructive: hsl(var(--destructive));
21+
--color-destructive-foreground: hsl(var(--destructive-foreground));
22+
23+
--color-muted: hsl(var(--muted));
24+
--color-muted-foreground: hsl(var(--muted-foreground));
25+
26+
--color-accent: hsl(var(--accent));
27+
--color-accent-foreground: hsl(var(--accent-foreground));
28+
29+
--color-popover: hsl(var(--popover));
30+
--color-popover-foreground: hsl(var(--popover-foreground));
31+
32+
--color-card: hsl(var(--card));
33+
--color-card-foreground: hsl(var(--card-foreground));
34+
35+
--color-link: hsl(var(--link));
36+
37+
--color-chart-1: hsl(var(--chart-1));
38+
--color-chart-2: hsl(var(--chart-2));
39+
--color-chart-3: hsl(var(--chart-3));
40+
--color-chart-4: hsl(var(--chart-4));
41+
--color-chart-5: hsl(var(--chart-5));
42+
43+
--radius-lg: var(--radius);
44+
--radius-md: calc(var(--radius) - 2px);
45+
--radius-sm: calc(var(--radius) - 4px);
46+
47+
--animate-accordion-down: accordion-down 0.2s ease-out;
48+
--animate-accordion-up: accordion-up 0.2s ease-out;
49+
50+
@keyframes accordion-down {
51+
from {
52+
height: 0;
53+
}
54+
to {
55+
height: var(--radix-accordion-content-height);
56+
}
57+
}
58+
@keyframes accordion-up {
59+
from {
60+
height: var(--radix-accordion-content-height);
61+
}
62+
to {
63+
height: 0;
64+
}
65+
}
66+
}
67+
68+
@utility container {
69+
margin-inline: auto;
70+
padding-inline: 2rem;
71+
@media (width >= --theme(--breakpoint-sm)) {
72+
max-width: none;
73+
}
74+
@media (width >= 1400px) {
75+
max-width: 1400px;
76+
}
77+
}
78+
79+
/*
80+
The default border color has changed to `currentColor` in Tailwind CSS v4,
81+
so we've added these compatibility styles to make sure everything still
82+
looks the same as it did with Tailwind CSS v3.
83+
84+
If we ever want to remove these styles, we need to add an explicit border
85+
color utility to any element that depends on these defaults.
86+
*/
87+
@layer base {
88+
*,
89+
::after,
90+
::before,
91+
::backdrop,
92+
::file-selector-button {
93+
border-color: var(--color-gray-200, currentColor);
94+
}
95+
}
96+
97+
@utility no-scrollbar {
98+
/* Hide scrollbar for Chrome, Safari and Opera */
99+
&::-webkit-scrollbar {
100+
display: none;
101+
}
102+
/* Hide scrollbar for IE, Edge and Firefox */
103+
-ms-overflow-style: none; /* IE and Edge */
104+
scrollbar-width: none; /* Firefox */
105+
}
106+
5107
@layer base {
6108
:root {
7109
--background: 0 0% 100%;
@@ -92,51 +194,41 @@
92194
}
93195
}
94196

95-
.CollapsibleContent {
96-
overflow: hidden;
97-
}
98-
.CollapsibleContent[data-state='open'] {
99-
animation: slideDown 300ms ease-out;
100-
}
101-
.CollapsibleContent[data-state='closed'] {
102-
animation: slideUp 300ms ease-out;
103-
}
104-
105-
@keyframes slideDown {
106-
from {
107-
height: 0;
197+
@layer utilities {
198+
.CollapsibleContent {
199+
overflow: hidden;
108200
}
109-
to {
110-
height: var(--radix-collapsible-content-height);
201+
.CollapsibleContent[data-state='open'] {
202+
animation: slideDown 300ms ease-out;
111203
}
112-
}
113-
114-
@keyframes slideUp {
115-
from {
116-
height: var(--radix-collapsible-content-height);
204+
.CollapsibleContent[data-state='closed'] {
205+
animation: slideUp 300ms ease-out;
117206
}
118-
to {
119-
height: 0;
207+
208+
@keyframes slideDown {
209+
from {
210+
height: 0;
211+
}
212+
to {
213+
height: var(--radix-collapsible-content-height);
214+
}
120215
}
121-
}
122216

123-
.dark {
124-
background-color: #8f8f8f;
125-
color: black
126-
}
217+
@keyframes slideUp {
218+
from {
219+
height: var(--radix-collapsible-content-height);
220+
}
221+
to {
222+
height: 0;
223+
}
224+
}
127225

128-
.dark label:focus {
129-
color: white
130-
}
226+
.dark {
227+
background-color: #8f8f8f;
228+
color: black;
229+
}
131230

132-
@layer utilities {
133-
/* Hide scrollbar for Chrome, Safari and Opera */
134-
.no-scrollbar::-webkit-scrollbar {
135-
display: none;
136-
}
137-
/* Hide scrollbar for IE, Edge and Firefox */
138-
.no-scrollbar {
139-
-ms-overflow-style: none; /* IE and Edge */
140-
scrollbar-width: none; /* Firefox */
141-
}
231+
.dark label:focus {
232+
color: white;
233+
}
142234
}

‎src/app/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const HomePage = () => {
99
return (
1010
<main className="min-h-[96dvh] bg-background">
1111
<div className="container mx-auto py-8 px-4">
12-
<h1 className="text-4xl font-bold mb-8 bg-gradient-to-r from-primary to-purple-600 bg-clip-text text-transparent">
12+
<h1 className="text-4xl font-bold mb-8 bg-linear-to-r from-primary to-purple-600 bg-clip-text text-transparent">
1313
File & Text Sharing
1414
</h1>
1515

‎src/components/file-download.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ const FileDownload = () => {
9090
Uploaded files
9191
</CardTitle>
9292
</CardHeader>
93-
<CardContent className="max-w-screen-md">
93+
<CardContent className="max-w-(--breakpoint-md)">
9494
<CardDescription className="pb-4">
9595
<div className="flex items-center gap-5 text-white">
9696
<Checkbox

‎src/components/navbar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import Link from "next/link"
77
const Navbar = () => {
88

99
return (
10-
<header className="text-white shadow">
10+
<header className="text-white shadow-sm">
1111
<div className="flex bg-[#009980] min-h-12 items-center px-6">
1212
<div className="flex justify-around">
1313
<Link href="/">

‎src/components/tree/folder-wrapper.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ const FolderWrapper = ({
6666
<div className="flex items-center gap-5">
6767
<Button
6868
variant="ghost"
69-
className={`px-0 [&>*]:hover:fill-blue-500 hover:bg-transparent h-5`}
69+
className={`px-0 hover:*:fill-blue-500 hover:bg-transparent h-5`}
7070
onClick={handleSelectAllFolder}
7171
>
7272
{openFolder ? (

‎src/components/ui/badge.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
55
import { cn } from "@/lib/utils"
66

77
const badgeVariants = cva(
8-
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
8+
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
99
{
1010
variants: {
1111
variant: {

‎src/components/ui/button.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
55
import { cn } from "@/lib/utils"
66

77
const buttonVariants = cva(
8-
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:rounded-full disabled:pointer-events-none disabled:opacity-50",
8+
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:rounded-full disabled:pointer-events-none disabled:opacity-50",
99
{
1010
variants: {
1111
variant: {

0 commit comments

Comments
 (0)