chore(deps): update dependency tailwindcss to v4

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"
 	},

postcss.config.mjs

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

src/App.tsx

@@ -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/components/footer.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/header.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/member.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/project.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/slideshow.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/ui/badge.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",

src/components/ui/breadcrumb.tsx

@@ -18,7 +18,7 @@ const BreadcrumbList = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<ol
 		className={cn(
-			"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+			"flex flex-wrap items-center gap-1.5 wrap-break-word text-sm text-muted-foreground sm:gap-2.5",
 			className,
 		)}
 		ref={ref}

src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 	{
 		defaultVariants: {
 			size: "default",

src/components/ui/card.tsx

@@ -8,7 +8,7 @@ const Card = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<div
 		className={cn(
-			"rounded-lg border bg-card text-card-foreground shadow-sm",
+			"rounded-lg border bg-card text-card-foreground shadow-xs",
 			className,
 		)}
 		ref={ref}

src/components/ui/checkbox.tsx

@@ -12,7 +12,7 @@ const Checkbox = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<CheckboxPrimitive.Root
 		className={cn(
-			"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+			"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
 			className,
 		)}
 		ref={ref}

src/components/ui/command.tsx

@@ -26,7 +26,7 @@ const CommandDialog = ({ children, ...props }: DialogProps) => {
 	return (
 		<Dialog {...props}>
 			<DialogContent className="overflow-hidden p-0 shadow-lg">
-				<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+				<Command className="**:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 **:[[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
 					{children}
 				</Command>
 			</DialogContent>
@@ -42,7 +42,7 @@ const CommandInput = React.forwardRef<
 		<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
 		<CommandPrimitive.Input
 			className={cn(
-				"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+				"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
 				className,
 			)}
 			ref={ref}
@@ -85,7 +85,7 @@ const CommandGroup = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<CommandPrimitive.Group
 		className={cn(
-			"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+			"overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
 			className,
 		)}
 		ref={ref}
@@ -113,7 +113,7 @@ const CommandItem = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<CommandPrimitive.Item
 		className={cn(
-			"relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+			"relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 			className,
 		)}
 		ref={ref}

src/components/ui/context-menu.tsx

@@ -26,7 +26,7 @@ const ContextMenuSubTrigger = React.forwardRef<
 >(({ className, inset, children, ...props }, ref) => (
 	<ContextMenuPrimitive.SubTrigger
 		className={cn(
-			"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+			"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
 			inset && "pl-8",
 			className,
 		)}
@@ -45,7 +45,7 @@ const ContextMenuSubContent = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<ContextMenuPrimitive.SubContent
 		className={cn(
-			"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+			"z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 			className,
 		)}
 		ref={ref}
@@ -61,7 +61,7 @@ const ContextMenuContent = React.forwardRef<
 	<ContextMenuPrimitive.Portal>
 		<ContextMenuPrimitive.Content
 			className={cn(
-				"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				"z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 				className,
 			)}
 			ref={ref}
@@ -79,7 +79,7 @@ const ContextMenuItem = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
 	<ContextMenuPrimitive.Item
 		className={cn(
-			"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
 			inset && "pl-8",
 			className,
 		)}
@@ -96,7 +96,7 @@ const ContextMenuCheckboxItem = React.forwardRef<
 	<ContextMenuPrimitive.CheckboxItem
 		checked={checked}
 		className={cn(
-			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
 			className,
 		)}
 		ref={ref}
@@ -119,7 +119,7 @@ const ContextMenuRadioItem = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
 	<ContextMenuPrimitive.RadioItem
 		className={cn(
-			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
 			className,
 		)}
 		ref={ref}

src/components/ui/dialog.tsx

@@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
 			{...props}
 		>
 			{children}
-			<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+			<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
 				<X className="h-4 w-4" />
 				<span className="sr-only">Close</span>
 			</DialogPrimitive.Close>