Bump tailwindcss from 3.4.17 to 4.1.5 in /ui

ui/package.json

@@ -22,17 +22,17 @@
     "swr": "^2.3.3"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.5",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^8.31.1",
     "@typescript-eslint/parser": "^8.31.0",
     "@vitejs/plugin-react": "^4.4.1",
-    "autoprefixer": "^10.4.16",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.7",
     "postcss": "^8.5.3",
-    "tailwindcss": "^3.3.5",
+    "tailwindcss": "^4.1.5",
     "typescript": "^5.8.3",
     "vite": "^6.3.5"
   }

ui/postcss.config.js

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

ui/src/components/Loader.tsx

@@ -4,7 +4,7 @@ const Loader: React.FC = () => {
   return (
     <div className="flex justify-center items-center py-10">
       <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-primary-500 border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]" role="status">
-        <span className="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">
+        <span className="absolute! -m-px! h-px! w-px! overflow-hidden! whitespace-nowrap! border-0! p-0! [clip:rect(0,0,0,0)]!">
           Loading...
         </span>
       </div>

ui/src/components/PostCard.tsx

@@ -14,7 +14,7 @@ const PostCard: React.FC<PostCardProps> = ({ post }) => {
     : post.body;
 
   return (
-    <article className="bg-bg-primary rounded-lg shadow-sm overflow-hidden hover:shadow-md transition-shadow p-6">
+    <article className="bg-bg-primary rounded-lg shadow-xs overflow-hidden hover:shadow-md transition-shadow p-6">
       <Link to={`/posts/${post.id}`} className="block">
         <h2 className="text-xl font-bold text-text-primary mb-2 hover:text-primary-600 transition-colors">
           {post.title}

ui/src/index.css

@@ -1,6 +1,28 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@config '../tailwind.config.js';
+
+/*
+  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);
+  }
+}
+
+@utility container {
+  @apply mx-auto px-4 max-w-4xl;
+}
 
 @layer base {
   :root {
@@ -87,9 +109,3 @@
   }
 }
 
-@layer components {
-  .container {
-    @apply mx-auto px-4 max-w-4xl;
-  }
-}
-

ui/src/layouts/MainLayout.tsx

@@ -10,7 +10,7 @@ interface MainLayoutProps {
 const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
   return (
     <div className="min-h-screen flex flex-col">
-      <header className="bg-bg-primary shadow-sm">
+      <header className="bg-bg-primary shadow-xs">
         <div className="container py-4 flex items-center justify-between">
           <Link to="/" className="flex items-center gap-2 text-primary-700 hover:text-primary-600 transition-colors">
             <BookOpen size={28} className="text-primary-700" />
@@ -30,7 +30,7 @@ const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
         </div>
       </header>
 
-      <main className="flex-grow container py-8">
+      <main className="grow container py-8">
         {children}
       </main>
 

ui/src/pages/PostDetailPage.tsx

@@ -50,7 +50,7 @@ const PostDetailPage: React.FC<PostDetailPageProps> = ({preLoadedPost}) => {
                 </Link>
             </div>
 
-            <article className="bg-bg-primary rounded-lg shadow-sm p-6 md:p-8">
+            <article className="bg-bg-primary rounded-lg shadow-xs p-6 md:p-8">
                 <header className="mb-6 border-b border-border-primary pb-4">
                     <h1 className="text-3xl font-bold text-text-primary mb-3">{post.title}</h1>
                     <div className="flex items-center text-text-muted text-sm">