Upgrade tailwindcss

package.json

@@ -21,22 +21,22 @@
     "react-router-dom": "^6.26.2"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.0.0",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
     "@types/react-test-renderer": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^8.7.0",
     "@typescript-eslint/parser": "^8.7.0",
     "@vitejs/plugin-react": "^4.3.2",
-    "autoprefixer": "^10.4.20",
     "clsx": "^2.1.1",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.12",
     "postcss": "^8.4.47",
     "prettier": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.8",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "react-test-renderer": "^18.3.1",
-    "tailwindcss": "^3.4.16",
+    "tailwindcss": "^4.0.0",
     "typescript": "^5.6.2",
     "vite": "^5.4.8",
     "vite-tsconfig-paths": "^5.0.1",

postcss.config.js

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 }

src/components/Heading.tsx

@@ -4,13 +4,13 @@ import { HTMLAttributes } from 'react'
 const Heading = ({ size = 1, className, children }: TitleProps) => {
   if (size === 1) {
     return (
-      <h1 className={clsx(className, 'text-2xl font-medium !leading-snug sm:text-3xl')}>
+      <h1 className={clsx(className, 'text-2xl font-medium leading-snug! sm:text-3xl')}>
         {children}
       </h1>
     )
   } else if (size === 2) {
     return (
-      <h2 className={clsx(className, 'text-2xl font-medium !leading-snug sm:text-3xl')}>
+      <h2 className={clsx(className, 'text-2xl font-medium leading-snug! sm:text-3xl')}>
         {children}
       </h2>
     )

src/components/TimelineItem.tsx

@@ -34,7 +34,7 @@ const TimelineItem = ({
       <div>
         <Paragraph
           className={clsx(
-            'relative z-10 !w-fit sm:px-2',
+            'relative z-10 w-fit! sm:px-2',
             em && 'font-medium',
             right && 'text-right sm:pr-0'
           )}

src/components/WorkPreviewTile.tsx

@@ -11,18 +11,18 @@ const WorkPreviewTile = ({ title, className, link, src, titleRight }: WorkPrevie
         href={link}
         className={clsx('group w-full overflow-hidden rounded-lg md:rounded-2xl', className)}
       >
-        <div className="aspect-[2/1] overflow-hidden rounded-lg md:rounded-2xl lg:aspect-[2.5/1]">
+        <div className="aspect-2/1 overflow-hidden rounded-lg md:rounded-2xl lg:aspect-[2.5/1]">
           <CustomImg
             src={src}
             alt={title}
-            className="transition-[transform,opacity] duration-[400ms] ease-in-out group-hover:scale-[1.02]"
+            className="transition-transform duration-[400ms] ease-in-out group-hover:scale-[1.02]"
           />
         </div>
         <Heading
           size={2}
           className={clsx(
             'relative mt-4 inline-flex items-baseline gap-2 md:absolute md:top-4 md:max-w-72 lg:max-w-full',
-            'after:absolute after:bottom-1 after:left-0 after:h-[2px] after:w-full after:max-w-0 after:bg-current after:transition-[max-width] after:ease-out group-hover:after:max-w-full after:md:h-[3px]',
+            'after:absolute after:bottom-1 after:left-0 after:h-[2px] after:w-full after:max-w-0 after:bg-current after:transition-[max-width] after:ease-out group-hover:after:max-w-full md:after:h-[3px]',
             titleRight ? 'md:right-8' : 'md:left-8'
           )}
         >

src/components/WorkTile.tsx

@@ -34,7 +34,7 @@ const WorkTile = ({
               {title}
             </Heading>
           )}
-          <div className="flex flex-col gap-6 md:flex-[2]">
+          <div className="flex flex-col gap-6 md:flex-2">
             {text && <Paragraph>{text}</Paragraph>}
             {more && (
               <>

src/content/CvPrint.tsx

@@ -17,7 +17,7 @@ const Contact = () => (
 
 const CvPrint = () => {
   return (
-    <div className="mx-auto max-w-screen-2xl p-8 pt-14 text-xl sm:p-14 sm:pt-24 print:max-w-full">
+    <div className="mx-auto max-w-(--breakpoint-2xl) p-8 pt-14 text-xl sm:p-14 sm:pt-24 print:max-w-full">
       <div className="flex flex-col justify-between md:flex-row print:flex-row">
         <Heading size={1}>Adam Plesník</Heading>
         <Heading size={2} className="mt-3 md:mt-0 print:mt-0">

src/content/kolbord/index.tsx

@@ -38,7 +38,7 @@ const WorkKolbord = () => {
       badges={['Figma', 'React', 'Payload CMS']}
       top={
         <div className="bg-[#E2BEC0] p-4 sm:p-8">
-          <div className="relative mx-auto max-w-screen-lg overflow-hidden before:absolute before:bottom-0 before:right-0 before:top-0 before:z-10 before:w-2 before:bg-[#E2BEC0]">
+          <div className="relative mx-auto max-w-(--breakpoint-lg) overflow-hidden before:absolute before:bottom-0 before:right-0 before:top-0 before:z-10 before:w-2 before:bg-[#E2BEC0]">
             <video loop autoPlay playsInline muted className="-m-1">
               <source src={kolbordDemo} type="video/mp4"></source>
             </video>

src/content/mhd/index.tsx

@@ -46,15 +46,15 @@ const WorkMHD = () => {
     >
       <CustomImg src={mhdTrio} />
       <GridWrapper>
-        <div className="relative mx-auto max-w-screen-xl">
+        <div className="relative mx-auto max-w-(--breakpoint-xl)">
           <img src={mhdVideo} alt="" />
           <div className="absolute left-[34.3%] top-[16.3%] w-[31.6%] overflow-hidden">
             <video loop autoPlay playsInline muted className="-mt-[2px]">
               <source src={mhd} type="video/mp4"></source>
             </video>
           </div>
         </div>
-        <div className="relative mx-auto max-w-screen-xl">
+        <div className="relative mx-auto max-w-(--breakpoint-xl)">
           <img src={mhdVideo} alt="" />
           <div className="absolute left-[34.3%] top-[16.3%] w-[31.6%] overflow-hidden">
             <video loop autoPlay playsInline muted className="-mt-[2px]">

src/index.css

@@ -1,8 +1,34 @@
-@import url('https://use.typekit.net/geh8ryt.css');
+@import url('https://use.typekit.net/geh8ryt.css') layer(base);
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@theme {
+  --color-cv-light: #fec84d;
+  --color-cv-dark: #333;
+
+  --color-skills-light: #e9cde8;
+  --color-skills-dark: #463946;
+
+  --font-sans: elza, sans-serif;
+}
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
 
 @page {
   margin: 0;

src/partials/Layout.tsx

@@ -11,7 +11,7 @@ const Layout = ({ outlet }: { outlet?: ReactNode | null }) => {
   return (
     <div className="flex flex-col pt-8">
       <ScrollRestoration />
-      <div className="sticky top-0 z-50 mb-12 flex w-full items-baseline gap-8 bg-gradient-to-b from-white/80 px-6 pt-5 sm:px-8 md:px-12 dark:from-zinc-800/80">
+      <div className="sticky top-0 z-50 mb-12 flex w-full items-baseline gap-8 bg-linear-to-b from-white/80 px-6 pt-5 sm:px-8 md:px-12 dark:from-zinc-800/80">
         <a href="/" className="cursor-pointer">
           {isWork ? (
             <span className="flex w-20 items-center transition-transform ease-in-out hover:-translate-x-2">
@@ -39,7 +39,7 @@ const Layout = ({ outlet }: { outlet?: ReactNode | null }) => {
             className={({ isActive }) =>
               clsx(
                 'relative cursor-pointer text-2xl font-medium sm:text-3xl',
-                'after:absolute after:bottom-1 after:left-0 after:h-[2px] after:w-full after:max-w-0 after:bg-current after:transition-[max-width] after:ease-in-out hover:after:max-w-full after:sm:h-[3px]',
+                'after:absolute after:bottom-1 after:left-0 after:h-[2px] after:w-full after:max-w-0 after:bg-current after:transition-[max-width] after:ease-in-out hover:after:max-w-full sm:after:h-[3px]',
                 isActive && 'after:max-w-full'
               )
             }
@@ -51,7 +51,7 @@ const Layout = ({ outlet }: { outlet?: ReactNode | null }) => {
             className={({ isActive }) =>
               clsx(
                 'relative cursor-pointer text-2xl font-medium sm:text-3xl',
-                'after:absolute after:bottom-1 after:left-0 after:h-[2px] after:w-full after:max-w-0 after:bg-current after:transition-[max-width] after:ease-in-out hover:after:max-w-full after:sm:h-[3px]',
+                'after:absolute after:bottom-1 after:left-0 after:h-[2px] after:w-full after:max-w-0 after:bg-current after:transition-[max-width] after:ease-in-out hover:after:max-w-full sm:after:h-[3px]',
                 isActive && 'after:max-w-full'
               )
             }