chore(deps): update dependency tailwindcss to v4 (#49)

* chore(deps): update dependency tailwindcss to v4

* Upgrade tailwincss

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Kordian Bruck <k@bruck.me>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

Author: 3 people

package.json

@@ -50,13 +50,14 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "2.3.6",
+		"@tailwindcss/postcss": "^4.1.17",
 		"@types/node": "^24.3.1",
 		"@types/react": "^19.1.12",
 		"@types/react-dom": "^19.1.9",
 		"@vitejs/plugin-react": "^5.0.0",
 		"postcss": "^8.5.6",
 		"serve": "^14.2.5",
-		"tailwindcss": "^3.4.17",
+		"tailwindcss": "^4.1.17",
 		"typescript": "^5.9.2",
 		"vite": "^7.1.11"
 	},

pnpm-lock.yaml

@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
 	plugins: {
-		tailwindcss: {},
+		"@tailwindcss/postcss": {},
 	},
 };
 

postcss.config.mjs

@@ -10,7 +10,7 @@ import NotFoundPage from '@/pages/NotFoundPage'
 
 function App() {
   return (
-    <div className="min-h-screen dark:bg-gradient-to-br dark:from-slate-900 dark:to-slate-800 bg-gradient-to-br from-slate-50 to-gray-100">
+    <div className="min-h-screen dark:bg-linear-to-br dark:from-slate-900 dark:to-slate-800 bg-linear-to-br from-slate-50 to-gray-100">
       <Header />
       <Routes>
         <Route path="/" element={<HomePage />} />

src/App.tsx

@@ -8,7 +8,7 @@ export const Footer = () => {
 				<div className="grid md:grid-cols-3 gap-8">
 					<div>
 						<div className="flex items-center space-x-3 mb-4">
-							<div className="w-8 h-8 dark:bg-gradient-to-br dark:from-blue-600 dark:to-blue-700 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center">
+							<div className="w-8 h-8 dark:bg-linear-to-br dark:from-blue-600 dark:to-blue-700 bg-linear-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center">
 								<Code className="w-5 h-5 text-white" />
 							</div>
 							<span
@@ -33,14 +33,14 @@ export const Footer = () => {
 						</h3>
 						<div className={`space-y-2 dark:text-gray-500 text-gray-400`}>
 							<a
-								className="dark:text-gray-500 text-gray-400 hover:dark:text-gray-300 hover:underline underline-offset-2 flex items-center transition-colors"
+								className="dark:text-gray-500 text-gray-400 dark:hover:text-gray-300 hover:underline underline-offset-2 flex items-center transition-colors"
 								href="mailto:app (at) tum.de"
 							>
 								<Mail className="w-4 h-4 mr-2" />
 								app (at) tum.de
 							</a>
 							<Link
-								className="dark:text-gray-500 text-gray-400 hover:dark:text-gray-300 hover:underline underline-offset-2 flex items-center transition-colors"
+								className="dark:text-gray-500 text-gray-400 dark:hover:text-gray-300 hover:underline underline-offset-2 flex items-center transition-colors"
 								to="/imprint"
 							>
 								<FileText className="w-4 h-4 mr-2" />
@@ -55,7 +55,7 @@ export const Footer = () => {
 						</h3>
 						<div className="space-y-2">
 							<a
-								className="dark:text-gray-500 text-gray-400 hover:dark:text-gray-300 hover:underline underline-offset-2 flex items-center transition-colors"
+								className="dark:text-gray-500 text-gray-400 dark:hover:text-gray-300 hover:underline underline-offset-2 flex items-center transition-colors"
 								href="https://github.com/tum-dev"
 								target="_blank"
 								rel="noopener noreferrer"
@@ -64,7 +64,7 @@ export const Footer = () => {
 								GitHub
 							</a>
 							<Link
-								className="dark:text-gray-500 text-gray-400 hover:dark:text-gray-300 hover:underline underline-offset-2 flex items-center transition-colors"
+								className="dark:text-gray-500 text-gray-400 dark:hover:text-gray-300 hover:underline underline-offset-2 flex items-center transition-colors"
 								to="/privacy"
 							>
 								<ShieldCheck className="w-4 h-4 mr-2" />

src/components/footer.tsx

@@ -7,7 +7,7 @@ import { ThemeToggle } from "./theme-toggle";
 export const Header = () => {
 	const location = useLocation();
 	return (
-		<header className="border-b sticky top-0 z-50 dark:bg-slate-900/90 dark:backdrop-blur-sm dark:border-slate-700 bg-white/80 backdrop-blur-sm">
+		<header className="border-b sticky top-0 z-50 dark:bg-slate-900/90 dark:backdrop-blur-xs dark:border-slate-700 bg-white/80 backdrop-blur-xs">
 			<div className="container mx-auto px-4 py-4">
 				<div className="flex items-center justify-between">
 					<Link className="flex items-center space-x-3" to="/">
@@ -36,7 +36,7 @@ export const Header = () => {
 						<ThemeToggle />
 						<Button
 							asChild
-							className="bg-gradient-to-r text-white dark:from-blue-600 dark:to-blue-700 dark:hover:from-blue-700 dark:hover:to-blue-800 from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 hidden lg:flex"
+							className="bg-linear-to-r text-white dark:from-blue-600 dark:to-blue-700 dark:hover:from-blue-700 dark:hover:to-blue-800 from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 hidden lg:flex"
 						>
 							<Link to="/contact">
 								<Mail className="w-4 h-4 mr-2" />

src/components/header.tsx

@@ -43,7 +43,7 @@ export const Member: React.FC<MemberProps> = ({
 						{github && (
 							<a
 								aria-label={`GitHub profile of ${name}`}
-								className="dark:text-gray-400 text-gray-500 hover:dark:text-blue-400 transition-colors"
+								className="dark:text-gray-400 text-gray-500 dark:hover:text-blue-400 transition-colors"
 								href={`https://github.com/${github}`}
 								target="_blank"
 								rel="noopener noreferrer"
@@ -54,7 +54,7 @@ export const Member: React.FC<MemberProps> = ({
 						{linkedin && (
 							<a
 								aria-label={`LinkedIn profile of ${name}`}
-								className="dark:text-gray-400 text-gray-500 hover:dark:text-blue-400 transition-colors"
+								className="dark:text-gray-400 text-gray-500 dark:hover:text-blue-400 transition-colors"
 								href={`https://linkedin.com/in/${linkedin}`}
 								target="_blank"
 								rel="noopener noreferrer"

src/components/member.tsx

@@ -25,7 +25,7 @@ export const Project: React.FC<ProjectProps> = ({
 	const isExternal = link && (link.startsWith('http') || link.startsWith('https'));
 
 	const CardComponent = (
-		<Card className="border-0 shadow-md group-hover:shadow-lg transition-shadow dark:bg-slate-700 dark:border-slate-600 bg-white group-hover:bg-slate-50 group-hover:dark:bg-slate-800">
+		<Card className="border-0 shadow-md group-hover:shadow-lg transition-shadow dark:bg-slate-700 dark:border-slate-600 bg-white group-hover:bg-slate-50 dark:group-hover:bg-slate-800">
 			<CardHeader>
 				<CardTitle className="flex items-center justify-between dark:text-white text-gray-900">
 					{name}

src/components/project.tsx

@@ -67,7 +67,7 @@ export function Slideshow({ images }: SlideshowProps) {
 				/>
 
 				{/* Overlay with gradient */}
-				<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
+				<div className="absolute inset-0 bg-linear-to-t from-black/60 via-transparent to-transparent" />
 
 				{/* Caption */}
 				<div className="absolute bottom-0 left-0 right-0 p-6">
@@ -79,7 +79,7 @@ export function Slideshow({ images }: SlideshowProps) {
 				{/* Play/Pause Button */}
 				<Button
 					aria-label="pausiert die Slideshow"
-					className="absolute top-4 right-4 bg-black/20 hover:bg-black/40 text-white border-0 backdrop-blur-sm"
+					className="absolute top-4 right-4 bg-black/20 hover:bg-black/40 text-white border-0 backdrop-blur-xs"
 					onClick={togglePlayPause}
 					size="sm"
 					title="Slideshow pausieren"
@@ -95,7 +95,7 @@ export function Slideshow({ images }: SlideshowProps) {
 				{/* Navigation Buttons */}
 				<Button
 					aria-label="zeigt vorheriges Bild an"
-					className="absolute left-4 top-1/2 -translate-y-1/2 bg-black/20 hover:bg-black/40 text-white border-0 backdrop-blur-sm"
+					className="absolute left-4 top-1/2 -translate-y-1/2 bg-black/20 hover:bg-black/40 text-white border-0 backdrop-blur-xs"
 					onClick={goToPrevious}
 					size="sm"
 					title="vorheriges Bild anzeigen"
@@ -106,7 +106,7 @@ export function Slideshow({ images }: SlideshowProps) {
 
 				<Button
 					aria-label="zeigt nächstes Bild an"
-					className="absolute right-4 top-1/2 -translate-y-1/2 bg-black/20 hover:bg-black/40 text-white border-0 backdrop-blur-sm"
+					className="absolute right-4 top-1/2 -translate-y-1/2 bg-black/20 hover:bg-black/40 text-white border-0 backdrop-blur-xs"
 					onClick={goToNext}
 					size="sm"
 					title="nächstes Bild anzeigen"
@@ -120,7 +120,7 @@ export function Slideshow({ images }: SlideshowProps) {
 			<div className="flex justify-center mt-4 space-x-2 overflow-x-auto pb-2">
 				{images.map((image, index) => (
 					<button
-						className={`flex-shrink-0 w-16 h-12 rounded-lg overflow-hidden border-2 transition-all duration-300 ${
+						className={`shrink-0 w-16 h-12 rounded-lg overflow-hidden border-2 transition-all duration-300 ${
 							index === currentSlide
 								? theme === "dark"
 									? "border-blue-400"

src/components/slideshow.tsx

@@ -4,7 +4,7 @@ import type * as React from "react";
 import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
-	"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",
+	"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",
 	{
 		defaultVariants: {
 			variant: "default",