Skip to content

Commit a27d60f

Browse files
thakurdotdevthakurdotdev
committed
feat: migrate tailwind v3 to v4
1 parent 53aa687 commit a27d60f

84 files changed

Lines changed: 273 additions & 332 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎client/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,18 +65,18 @@
6565
"zustand": "^5.0.3"
6666
},
6767
"devDependencies": {
68+
"@tailwindcss/postcss": "^4.1.18",
6869
"@tanstack/eslint-plugin-query": "^5.91.2",
6970
"@types/react": "^19.2.3",
7071
"@types/react-dom": "^19.2.3",
7172
"@vitejs/plugin-react": "^4.3.3",
72-
"autoprefixer": "^10.4.20",
7373
"babel-plugin-react-compiler": "^1.0.0",
7474
"eslint": "^9.13.0",
7575
"eslint-plugin-react": "^7.37.2",
7676
"eslint-plugin-react-hooks": "^5.0.0",
7777
"eslint-plugin-react-refresh": "^0.4.14",
7878
"postcss": "^8.4.47",
79-
"tailwindcss": "^3.4.14",
79+
"tailwindcss": "^4.1.18",
8080
"vite": "^5.4.10"
8181
},
8282
"packageManager": "pnpm@9.8.0+sha512.8e4c3550fb500e808dbc30bb0ce4dd1eb614e30b1c55245f211591ec2cdf9c611cabd34e1364b42f564bd54b3945ed0f49d61d1bbf2ec9bd74b866fcdc723276"

‎client/postcss.config.js‎

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

‎client/src/Pages/Music/AddToPlaylist.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ const AddToPlaylist = ({ dialogOpen, setDialogOpen, song }) => {
146146
<Music className="w-5 h-5" />
147147
</AvatarFallback>
148148
</Avatar>
149-
<div className="flex-grow">
149+
<div className="grow">
150150
<p className="font-medium">{playlist.name}</p>
151151
<p className="text-sm text-muted-foreground">
152152
{playlist.songCount || 0} songs

‎client/src/Pages/Music/Album.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const Album = () => {
4848
backgroundSize: "cover",
4949
}}
5050
>
51-
<div className="rounded-2xl w-full h-full bg-black/60 backdrop-blur-sm flex items-center p-3 gap-6">
51+
<div className="rounded-2xl w-full h-full bg-black/60 backdrop-blur-xs flex items-center p-3 gap-6">
5252
<div className="w-[200px] h-[200px]">
5353
<img src={bgUrl} className="rounded-lg" />
5454
</div>

‎client/src/Pages/Music/Artist.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const Artist = () => {
4646
backgroundSize: "cover",
4747
}}
4848
>
49-
<div className="rounded-2xl w-full h-full bg-black/60 backdrop-blur-sm flex flex-col transition-all relative">
49+
<div className="rounded-2xl w-full h-full bg-black/60 backdrop-blur-xs flex flex-col transition-all relative">
5050
<div className="absolute top-3 right-3">
5151
<Button onClick={() => navigate(-1)} variant="ghost">
5252
<ArrowLeft className="w-5 h-5" />

‎client/src/Pages/Music/BottomPlayer/DraggableButton.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,12 +77,12 @@ const DraggableButton = memo(({ position, onMaximize, currentSong, isDragging })
7777
return (
7878
<div ref={setNodeRef} {...attributes} {...listeners} style={style} className="select-none">
7979
<div
80-
className={`flex items-center gap-2 pl-1 pr-3 py-1 rounded-full bg-[#1a1a1a] border border-white/[0.08] transition-transform ${
80+
className={`flex items-center gap-2 pl-1 pr-3 py-1 rounded-full bg-[#1a1a1a] border border-white/8 transition-transform ${
8181
isDragging ? "scale-105" : ""
8282
}`}
8383
>
8484
<div
85-
className="relative w-11 h-11 flex-shrink-0 cursor-pointer"
85+
className="relative w-11 h-11 shrink-0 cursor-pointer"
8686
onClick={(e) => {
8787
e.stopPropagation()
8888
if (!isDragging) handlePlayPause()

‎client/src/Pages/Music/BottomPlayer/FloatingVoiceControl.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ const FloatingVoiceControl = memo(() => {
8686
const showSearching = isSearching && searchLoading
8787

8888
const content = (
89-
<div className="fixed bottom-20 right-4 z-[9999] flex flex-col items-end gap-2">
89+
<div className="fixed bottom-20 right-4 z-9999 flex flex-col items-end gap-2">
9090
<AnimatePresence>
9191
{(isListening || showSearching) && (
9292
<motion.div

‎client/src/Pages/Music/BottomPlayer/NowPlayingTab.jsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,25 +25,25 @@ const NowPlayingTab = memo(({ currentSong, isDesktop = false }) => {
2525
className="absolute inset-0 bg-cover bg-center opacity-25 blur-3xl scale-125"
2626
style={{ backgroundImage: `url(${songImage})` }}
2727
/>
28-
<div className="absolute inset-0 bg-gradient-to-t from-background via-background/70 to-background/50" />
28+
<div className="absolute inset-0 bg-linear-to-t from-background via-background/70 to-background/50" />
2929

3030
<div className="relative z-10 flex flex-col items-center gap-12 w-full">
3131
<div
3232
className="relative group shrink-0"
3333
style={{ width: "min(400px, 45vh)", height: "min(400px, 45vh)" }}
3434
>
35-
<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-primary/30 via-transparent to-primary/20 opacity-60 blur-2xl scale-110 group-hover:opacity-80 transition-opacity duration-300" />
35+
<div className="absolute inset-0 rounded-2xl bg-linear-to-br from-primary/30 via-transparent to-primary/20 opacity-60 blur-2xl scale-110 group-hover:opacity-80 transition-opacity duration-300" />
3636
<Avatar className="w-full h-full rounded-2xl shadow-2xl relative z-10 ring-1 ring-white/20">
3737
<AvatarImage src={songImage} alt={currentSong.name} className="object-cover" />
38-
<AvatarFallback className="text-6xl bg-gradient-to-br from-primary/10 to-primary/5">
38+
<AvatarFallback className="text-6xl bg-linear-to-br from-primary/10 to-primary/5">
3939
<Music className="w-24 h-24 text-muted-foreground" />
4040
</AvatarFallback>
4141
</Avatar>
4242
{currentSong?.genre && (
4343
<div className="absolute top-4 left-4 z-20">
4444
<Badge
4545
variant="secondary"
46-
className="text-xs bg-black/40 backdrop-blur-sm border border-white/20 text-white"
46+
className="text-xs bg-black/40 backdrop-blur-xs border border-white/20 text-white"
4747
>
4848
{currentSong.genre}
4949
</Badge>
@@ -76,14 +76,14 @@ const NowPlayingTab = memo(({ currentSong, isDesktop = false }) => {
7676

7777
return (
7878
<div className="h-full flex flex-col p-4 sm:p-6 max-w-2xl mx-auto gap-10 relative">
79-
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-primary/[0.02] to-transparent pointer-events-none" />
79+
<div className="absolute inset-0 bg-linear-to-b from-transparent via-primary/2 to-transparent pointer-events-none" />
8080

8181
<div className="flex justify-center relative z-10">
8282
<div className="w-full h-96 relative group">
83-
<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-primary/20 via-transparent to-primary/10 opacity-50 blur-xl scale-105 group-hover:opacity-70 transition-opacity duration-300" />
83+
<div className="absolute inset-0 rounded-2xl bg-linear-to-br from-primary/20 via-transparent to-primary/10 opacity-50 blur-xl scale-105 group-hover:opacity-70 transition-opacity duration-300" />
8484
<Avatar className="w-full h-full rounded-2xl shadow-2xl relative z-10 ring-1 ring-white/10">
8585
<AvatarImage src={songImage} alt={currentSong.name} className="object-cover" />
86-
<AvatarFallback className="text-4xl sm:text-6xl bg-gradient-to-br from-primary/10 to-primary/5 backdrop-blur-sm">
86+
<AvatarFallback className="text-4xl sm:text-6xl bg-linear-to-br from-primary/10 to-primary/5 backdrop-blur-xs">
8787
<Music className="w-16 h-16 sm:w-20 sm:h-20 text-muted-foreground" />
8888
</AvatarFallback>
8989
</Avatar>
@@ -92,7 +92,7 @@ const NowPlayingTab = memo(({ currentSong, isDesktop = false }) => {
9292
<div className="absolute top-3 left-3 z-20">
9393
<Badge
9494
variant="secondary"
95-
className="text-xs bg-white/20 backdrop-blur-sm border border-white/20 text-foreground"
95+
className="text-xs bg-white/20 backdrop-blur-xs border border-white/20 text-foreground"
9696
>
9797
{currentSong.genre}
9898
</Badge>

‎client/src/Pages/Music/BottomPlayer/PlayerSheet.jsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -86,9 +86,9 @@ const PlayerSheet = memo(({ isOpen, onClose, currentSong, onOpenModal }) => {
8686
<Sheet open={isOpen} onOpenChange={onClose}>
8787
<SheetContent
8888
side="bottom"
89-
className="h-full w-full p-0 overflow-hidden bg-gradient-to-br from-background/95 via-background/90 to-background/95 backdrop-blur-xl border-t border-white/10 shadow-2xl"
89+
className="h-full w-full p-0 overflow-hidden bg-linear-to-br from-background/95 via-background/90 to-background/95 backdrop-blur-xl border-t border-white/10 shadow-2xl"
9090
>
91-
<div className="absolute inset-0 bg-gradient-to-br from-white/[0.08] via-transparent to-white/[0.04] pointer-events-none" />
91+
<div className="absolute inset-0 bg-linear-to-br from-white/8 via-transparent to-white/4 pointer-events-none" />
9292

9393
{/* Desktop: Side-by-side layout */}
9494
<div className="hidden lg:flex h-full w-full max-w-5xl mx-auto relative z-10">
@@ -101,7 +101,7 @@ const PlayerSheet = memo(({ isOpen, onClose, currentSong, onOpenModal }) => {
101101
<Button
102102
variant="ghost"
103103
size="icon"
104-
className="h-10 w-10 bg-black/30 backdrop-blur-sm hover:bg-black/50 rounded-full"
104+
className="h-10 w-10 bg-black/30 backdrop-blur-xs hover:bg-black/50 rounded-full"
105105
>
106106
<MoreHorizontal className="h-5 w-5" />
107107
</Button>
@@ -130,8 +130,8 @@ const PlayerSheet = memo(({ isOpen, onClose, currentSong, onOpenModal }) => {
130130
</div>
131131

132132
{/* Queue Section */}
133-
<div className="w-[420px] flex flex-col bg-white/[0.02]">
134-
<div className="h-14 px-4 flex items-center gap-2 border-b border-white/10 bg-white/[0.03] shrink-0 justify-between">
133+
<div className="w-[420px] flex flex-col bg-white/2">
134+
<div className="h-14 px-4 flex items-center gap-2 border-b border-white/10 bg-white/3 shrink-0 justify-between">
135135
<div className="flex items-center gap-2">
136136
<ListMusic className="w-4 h-4 text-primary" />
137137
<span className="text-base font-medium">Queue</span>
@@ -147,7 +147,7 @@ const PlayerSheet = memo(({ isOpen, onClose, currentSong, onOpenModal }) => {
147147
variant="ghost"
148148
size="icon"
149149
onClick={onClose}
150-
className="h-10 w-10 bg-black/30 backdrop-blur-sm hover:bg-black/50 rounded-full"
150+
className="h-10 w-10 bg-black/30 backdrop-blur-xs hover:bg-black/50 rounded-full"
151151
>
152152
<ChevronDownIcon className="h-5 w-5" />
153153
</Button>
@@ -160,7 +160,7 @@ const PlayerSheet = memo(({ isOpen, onClose, currentSong, onOpenModal }) => {
160160

161161
{/* Mobile/Tablet: Tab-based layout */}
162162
<div className="lg:hidden h-full flex flex-col w-full max-w-[500px] mx-auto relative z-10">
163-
<SheetHeader className="px-3 pb-0 border-b border-white/10 bg-gradient-to-r from-white/[0.05] to-transparent">
163+
<SheetHeader className="px-3 pb-0 border-b border-white/10 bg-linear-to-r from-white/5 to-transparent">
164164
<div className="flex items-center justify-between">
165165
<Button
166166
variant="ghost"
@@ -203,12 +203,12 @@ const PlayerSheet = memo(({ isOpen, onClose, currentSong, onOpenModal }) => {
203203
</div>
204204

205205
<div className="flex justify-center pb-4">
206-
<div className="grid grid-cols-2 w-full bg-white/[0.08] rounded-lg p-1 border border-white/10">
206+
<div className="grid grid-cols-2 w-full bg-white/8 rounded-lg p-1 border border-white/10">
207207
<button
208208
onClick={() => setActiveTab("current")}
209209
className={`flex items-center justify-center gap-2 py-2 px-3 rounded-md text-sm font-medium transition-colors ${
210210
activeTab === "current"
211-
? "bg-primary/20 text-foreground shadow-sm"
211+
? "bg-primary/20 text-foreground shadow-xs"
212212
: "text-muted-foreground hover:text-foreground"
213213
}`}
214214
>
@@ -220,7 +220,7 @@ const PlayerSheet = memo(({ isOpen, onClose, currentSong, onOpenModal }) => {
220220
onClick={() => setActiveTab("queue")}
221221
className={`flex items-center justify-center gap-2 py-2 px-3 rounded-md text-sm font-medium transition-colors ${
222222
activeTab === "queue"
223-
? "bg-primary/20 text-foreground shadow-sm"
223+
? "bg-primary/20 text-foreground shadow-xs"
224224
: "text-muted-foreground hover:text-foreground"
225225
}`}
226226
>

‎client/src/Pages/Music/BottomPlayer/QueueTab.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@ const QueueSongItem = memo(
160160
<motion.div
161161
whileHover={{ scale: 1.02 }}
162162
whileTap={{ scale: 0.98 }}
163-
className="relative w-10 h-10 shrink-0 cursor-pointer rounded-md overflow-hidden shadow-sm"
163+
className="relative w-10 h-10 shrink-0 cursor-pointer rounded-md overflow-hidden shadow-xs"
164164
onClick={handlePlay}
165165
>
166166
<LazyImage

0 commit comments

Comments
 (0)