migrate tailwindcss v3 to v4

website/package.json

@@ -22,14 +22,15 @@
     "tailwind-merge": "2.6.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.0.0",
     "@types/node": "20.16.11",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "eslint": "8.57.0",
     "eslint-config-next": "15.1.6",
     "postcss": "8.4.49",
     "shiki": "1.14.1",
-    "tailwindcss": "3.4.13",
+    "tailwindcss": "4.0.0",
     "typescript": "5.7.2"
   }
 }

website/postcss.config.mjs

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

website/src/app/components/DocumentationButton.tsx

@@ -12,7 +12,7 @@ export const DocumentationButton = () => {
           });
         }
       }}
-      className="bg-white/5 rounded p-2 px-4 hover:bg-white hover:text-gray-950"
+      className="bg-white/5 rounded-sm p-2 px-4 hover:bg-white hover:text-gray-950"
     >
       Documentation
     </a>

website/src/app/components/FeatureGrid.tsx

@@ -285,9 +285,9 @@ const features = [
     header: (
       <Skeleton>
         <div className="flex flex-col w-full gap-2 p-5">
-          <div className="border border-cyan-700 h-5 w-full rounded bg-cyan-900" />
-          <div className="border border-cyan-700 h-5 rounded bg-cyan-900 w-1/2" />
-          <div className="border border-cyan-700 h-5 rounded bg-cyan-900 w-2/3" />
+          <div className="border border-cyan-700 h-5 w-full rounded-sm bg-cyan-900" />
+          <div className="border border-cyan-700 h-5 rounded-sm bg-cyan-900 w-1/2" />
+          <div className="border border-cyan-700 h-5 rounded-sm bg-cyan-900 w-2/3" />
         </div>
       </Skeleton>
     ),

website/src/app/components/Footer.tsx

@@ -3,7 +3,7 @@ import Image from "next/image";
 export const Footer = () => (
   <footer>
     <div className="flex justify-center pt-8 mt-24 w-full text-zinc-400/80 border-t border-zinc-700 ">
-      <div className="p-8 w-full max-w-screen-xl">
+      <div className="p-8 w-full max-w-(--breakpoint-xl)">
         <div className="mb-10 w-full">
           <ul className="flex flex-wrap flex-row items-stretch w-full gap-6 lg:gap-20 xl:gap-36">
             <li className="flex-1 min-w-[180px] flex items-center flex-col md:block">

website/src/app/components/OpenAPI.tsx

@@ -49,7 +49,7 @@ export const OpenAPI = () => {
 
   return (
     <section className="py-14">
-      <div className="max-w-screen-xl mx-auto px-4 gap-16 justify-between md:px-8 lg:flex ">
+      <div className="max-w-(--breakpoint-xl) mx-auto px-4 gap-16 justify-between md:px-8 lg:flex ">
         <div className=" flex-1">
           <div className="max-w-xl space-y-3">
             <h3 className="text-[#ff00bd] font-semibold">

website/src/app/components/PreviewInput.tsx

@@ -127,7 +127,7 @@ export const PreviewInput = ({ sample }: { sample: string }) => {
       >
         Drop to upload
       </div>
-      {error && <div className="p-2 bg-white/5 rounded mb-4">{error}</div>}
+      {error && <div className="p-2 bg-white/5 rounded-sm mb-4">{error}</div>}
       <form
         ref={formRef}
         className="justify-center items-center gap-x-3 sm:flex"
@@ -159,7 +159,7 @@ export const PreviewInput = ({ sample }: { sample: string }) => {
           }
         }}
       >
-        <label className="hidden md:block rounded transition hover:scale-125 cursor-pointer">
+        <label className="hidden md:block rounded-sm transition hover:scale-125 cursor-pointer">
           <input
             type="file"
             name="spec"
@@ -193,7 +193,7 @@ export const PreviewInput = ({ sample }: { sample: string }) => {
           readOnly={file !== undefined}
           placeholder={sample}
           className={cn(
-            "w-full px-4 py-3.5 text-white bg-slate-700 outline-none rounded-lg shadow font-medium text-md",
+            "w-full px-4 py-3.5 text-white bg-slate-700 outline-hidden rounded-lg shadow-sm font-medium text-md",
             "read-only:text-slate-300",
           )}
         />

website/src/app/components/TechStack.tsx

@@ -59,7 +59,7 @@ export const TechStackBubble = () => {
 
   return (
     <div className="overflow-hidden h-full relative flex items-center justify-center w-full">
-      <div className="flex flex-row flex-shrink-0 justify-center items-center gap-2">
+      <div className="flex flex-row shrink-0 justify-center items-center gap-2">
         <Container className="h-8 w-8 circle-1">
           <Image
             src="/logo-ts.svg"

website/src/app/components/page.tsx

@@ -70,15 +70,15 @@ const Page = async () => {
     <div className="min-h-full bg-gray-900 p-4 lg:p-0">
       <header>
         <nav className="pb-5 md:text-sm">
-          <div className="h-24 flex flex-col md:flex-row items-center max-w-screen-xl mx-auto px-4 md:flex md:px-8 justify-between">
+          <div className="h-24 flex flex-col md:flex-row items-center max-w-(--breakpoint-xl) mx-auto px-4 md:flex md:px-8 justify-between">
             <Brand />
             <div className="flex gap-4 items-center">
               <DocumentationButton />
               <div className="mx-2 border h-10 border-slate-700" />
               <a
                 target="_blank"
                 href="https://github.com/zuplo/zudoku/"
-                className="flex-shrink-0"
+                className="shrink-0"
               >
                 <Image
                   src="/github-logo.svg"
@@ -91,7 +91,7 @@ const Page = async () => {
               <a
                 target="_blank"
                 href="https://discord.zudoku.dev"
-                className="flex-shrink-0"
+                className="shrink-0"
               >
                 <Image
                   src="/discord-logo.svg"
@@ -106,7 +106,7 @@ const Page = async () => {
         </nav>
       </header>
       <section className="relative">
-        <div className="relative max-w-screen-xl mx-auto px-4 py-28 md:px-8">
+        <div className="relative max-w-(--breakpoint-xl) mx-auto px-4 py-28 md:px-8">
           <div className="space-y-8 max-w-3xl mx-auto text-center">
             <AnimatedHeading />
             <p className="max-w-2xl mx-auto text-slate-400">

website/src/app/globals.css

@@ -1,44 +1,68 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
-html,
-body {
-  height: 100%;
+@theme {
+  --background-image-gradient-radial: radial-gradient(var(--tw-gradient-stops));
+  --background-image-gradient-conic: conic-gradient(
+    from 180deg at 50% 50%,
+    var(--tw-gradient-stops)
+  );
 }
 
-/*:root {*/
-/*  --foreground-rgb: 0, 0, 0;*/
-/*  --background-start-rgb: 255, 240, 251;*/
-/*  --background-end-rgb: 255, 255, 255;*/
-/*}*/
+/*
+  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.
 
-:root {
-  --foreground-rgb: 255, 255, 255;
-  --background-start-rgb: 0, 0, 0;
-  --background-end-rgb: 0, 0, 0;
+  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);
+  }
+}
+
+@utility text-balance {
+  text-wrap: balance;
 }
 
-@media (prefers-color-scheme: dark) {
+@layer utilities {
+  html,
+  body {
+    height: 100%;
+  }
+
+  /*:root {*/
+  /*  --foreground-rgb: 0, 0, 0;*/
+  /*  --background-start-rgb: 255, 240, 251;*/
+  /*  --background-end-rgb: 255, 255, 255;*/
+  /*}*/
+
   :root {
     --foreground-rgb: 255, 255, 255;
     --background-start-rgb: 0, 0, 0;
     --background-end-rgb: 0, 0, 0;
   }
-}
 
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --foreground-rgb: 255, 255, 255;
+      --background-start-rgb: 0, 0, 0;
+      --background-end-rgb: 0, 0, 0;
+    }
+  }
 
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
+  body {
+    color: rgb(var(--foreground-rgb));
+    background: linear-gradient(
+        to bottom,
+        transparent,
+        rgb(var(--background-end-rgb))
+      )
+      rgb(var(--background-start-rgb));
   }
 }

website/tsconfig.json

@@ -19,7 +19,8 @@
     ],
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "target": "ES2017"
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]