Tailwind V4

package.json

@@ -22,6 +22,7 @@
     "react-dom": "19.0.0-rc-cd22717c-20241013"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "4.0.0-beta.2",
     "@types/eslint": "^8.56.10",
     "@types/node": "^20",
     "@types/react": "npm:types-react@19.0.0-rc.1",
@@ -31,10 +32,10 @@
     "concurrently": "^9.1.0",
     "eslint": "^8",
     "eslint-config-next": "15.0.0-rc.1",
-    "prettier": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.8",
     "postcss": "^8",
-    "tailwindcss": "^3.4.1",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.9",
+    "tailwindcss": "4.0.0-beta.2",
     "typescript": "^5"
   },
   "pnpm": {

postcss.config.mjs

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

src/app/(tools)/layout.tsx

@@ -35,7 +35,7 @@ export default function ToolsLayout({
   return (
     <div className="flex min-h-screen flex-col justify-between p-8 font-[family-name:var(--font-geist-sans)] sm:p-20">
       <BackButton />
-      <main className="flex flex-grow flex-col items-center justify-center">
+      <main className="flex grow flex-col items-center justify-center">
         {children}
       </main>
       <footer className="mt-8 text-center text-sm text-gray-500">

src/app/(tools)/rounded-border/rounded-tool.tsx

@@ -143,7 +143,7 @@ function SaveAsPngButton({
           plausible("convert-image-to-png");
           void convertToPng();
         }}
-        className="rounded-lg bg-green-700 px-4 py-2 text-sm font-semibold text-white shadow-md transition-colors duration-200 hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75"
+        className="rounded-lg bg-green-700 px-4 py-2 text-sm font-semibold text-white shadow-md transition-colors duration-200 hover:bg-green-800 focus:outline-hidden focus:ring-2 focus:ring-green-400 focus:ring-opacity-75"
       >
         Save as PNG
       </button>
@@ -173,7 +173,7 @@ function RoundedToolCore(props: { fileUploaderProps: FileUploaderResult }) {
   if (!imageMetadata) {
     return (
       <UploadBox
-        title="Add rounded borders to your images. Quick and easy."
+        title="Add rounded-sm borders to your images. Quick and easy."
         subtitle="Allows pasting images from clipboard"
         description="Upload Image"
         accept="image/*"

src/app/(tools)/square-image/square-tool.tsx

@@ -128,7 +128,7 @@ function SquareToolCore(props: { fileUploaderProps: FileUploaderResult }) {
             plausible("create-square-image");
             handleSaveImage();
           }}
-          className="rounded-lg bg-green-700 px-4 py-2 text-sm font-semibold text-white shadow-md transition-colors duration-200 hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75"
+          className="rounded-lg bg-green-700 px-4 py-2 text-sm font-semibold text-white shadow-md transition-colors duration-200 hover:bg-green-800 focus:outline-hidden focus:ring-2 focus:ring-green-400 focus:ring-opacity-75"
         >
           Save Image
         </button>

src/app/(tools)/svg-to-png/svg-tool.tsx

@@ -123,7 +123,7 @@ function SaveAsPngButton({
           plausible("convert-svg-to-png");
           void convertToPng();
         }}
-        className="rounded-lg bg-green-700 px-4 py-2 text-sm font-semibold text-white shadow-md transition-colors duration-200 hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75"
+        className="focus:ring-opacity-75 rounded-lg bg-green-700 px-4 py-2 text-sm font-semibold text-white shadow-md transition-colors duration-200 hover:bg-green-800 focus:ring-2 focus:ring-green-400 focus:outline-hidden"
       >
         Save as PNG
       </button>

src/app/globals.css

@@ -1,6 +1,27 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@theme {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+}
+
+/*
+  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);
+  }
+}
 
 :root {
   --background: #0a0a0a;

src/app/page.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 export default function Home() {
   return (
     <div className="flex min-h-screen flex-col justify-between p-8 font-[family-name:var(--font-geist-sans)] sm:p-20">
-      <main className="flex flex-grow flex-col items-center justify-center">
+      <main className="flex grow flex-col items-center justify-center">
         <div>
           Hi. I&apos;m{" "}
           <a

src/components/shared/upload-box.tsx

@@ -41,7 +41,7 @@ export function UploadBox({
         </svg>
         <p className="text-sm text-gray-400">Drag and Drop</p>
         <p className="text-sm text-gray-500">or</p>
-        <label className="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 font-semibold text-white shadow-md transition-colors duration-200 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
+        <label className="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 font-semibold text-white shadow-md transition-colors duration-200 hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
           <span>{description}</span>
           <input
             type="file"