Upgrade Tailwind 3 => 4

Author: mattstauffer

package-lock.json

@@ -5,13 +5,13 @@
         "build": "vite build"
     },
     "devDependencies": {
-        "autoprefixer": "^10.4.0",
+        "@tailwindcss/postcss": "^4.2.1",
         "axios": "^1.11.0",
+        "concurrently": "^9.0.1",
+        "laravel-vite-plugin": "^2.0.0",
         "lodash": "^4.17.19",
         "postcss": "^8.4.4",
-        "tailwindcss": "^3.0.0",
-        "vite": "^7.0.7",
-        "laravel-vite-plugin": "^2.0.0",
-        "concurrently": "^9.0.1"
+        "tailwindcss": "^4.2.1",
+        "vite": "^7.0.7"
     }
 }

package.json

@@ -1,6 +1,5 @@
 module.exports = {
     plugins: {
-        tailwindcss: {},
-        autoprefixer: {},
+        '@tailwindcss/postcss': {},
     },
 }

postcss.config.js

@@ -1,6 +1,57 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@theme {
+  --color-*: initial;
+  --color-gray-50: #fafafa;
+  --color-gray-100: #f3f4f6;
+  --color-gray-200: #e4e4e7;
+  --color-gray-500: #71717a;
+  --color-gray-700: #2e3036;
+  --color-white: #fff;
+  --color-black: #000;
+
+  --color-indigo-50: #eef2ff;
+  --color-indigo-100: #e0e7ff;
+  --color-indigo-200: #c7d2fe;
+  --color-indigo-300: #a5b4fc;
+  --color-indigo-400: #818cf8;
+  --color-indigo-500: #6366f1;
+  --color-indigo-600: #4f46e5;
+  --color-indigo-700: #4338ca;
+  --color-indigo-800: #3730a3;
+  --color-indigo-900: #312e81;
+  --color-indigo-950: #1e1b4b;
+
+  --color-teal-50: #f0fdfa;
+  --color-teal-100: #ccfbf1;
+  --color-teal-200: #99f6e4;
+  --color-teal-300: #5eead4;
+  --color-teal-400: #2dd4bf;
+  --color-teal-500: #14b8a6;
+  --color-teal-600: #0d9488;
+  --color-teal-700: #0f766e;
+  --color-teal-800: #115e59;
+  --color-teal-900: #134e4a;
+  --color-teal-950: #042f2e;
+}
+
+/*
+  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);
+  }
+}
 
 .schedule-wrapper svg {
     max-width: 100%;
@@ -20,11 +71,11 @@
 }
 
 .markdown h3 code, .markdown p code {
-    @apply text-xs bg-gray-700 text-white px-2 py-1 rounded
+    @apply text-xs bg-gray-700 text-white px-2 py-1 rounded-sm
 }
 
 .markdown pre {
-    @apply text-xs bg-gray-700 p-6 rounded-lg mb-10 lg:max-w-screen-md overflow-x-scroll
+    @apply text-xs bg-gray-700 p-6 rounded-lg mb-10 lg:max-w-(--breakpoint-md) overflow-x-scroll
 }
 
 .markdown pre code {

resources/css/app.css

@@ -1,5 +1,5 @@
 <header class="py-8 bg-gray-700">
-    <div class="flex flex-col max-w-screen-xl px-4 mx-auto sm:px-6 lg:px-8">
+    <div class="flex flex-col max-w-(--breakpoint-xl) px-4 mx-auto sm:px-6 lg:px-8">
 
         <div class="mb-2 mt-4 text-3xl">
             <a href="/" class="inline-block">
@@ -10,7 +10,7 @@
             </a>
         </div>
     </div>
-    <div class="max-w-screen-xl px-4 py-4 mx-auto font-light text-base text-white sm:px-6 lg:px-8">
+    <div class="max-w-(--breakpoint-xl) px-4 py-4 mx-auto font-light text-base text-white sm:px-6 lg:px-8">
         <p class="mb-4 md:mb-2">
             Provides API endpoints for support information for PHP versions 5.6 and later.
         </p>

resources/views/partials/header.blade.php

@@ -2,7 +2,7 @@
 
 @section('content')
     <dl class="grid grid-cols-1 gap-5 mt-5 sm:grid-cols-4">
-        <div class="px-4 py-5 overflow-hidden bg-white rounded-lg shadow sm:p-6">
+        <div class="px-4 py-5 overflow-hidden bg-white rounded-lg shadow-sm sm:p-6">
             <dt class="text-sm font-medium text-gray-500 truncate">Last Week</dt>
             <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">
                 <h3>{{ $week['current'] }} hits</h3>
@@ -11,7 +11,7 @@
             </dd>
         </div>
 
-        <div class="px-4 py-5 overflow-hidden bg-white rounded-lg shadow sm:p-6">
+        <div class="px-4 py-5 overflow-hidden bg-white rounded-lg shadow-sm sm:p-6">
             <dt class="text-sm font-medium text-gray-500 truncate">Last Month</dt>
             <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">
                 <h3>{{ $month['current'] }} hits</h3>
@@ -20,7 +20,7 @@
             </dd>
         </div>
 
-        <div class="px-4 py-5 overflow-hidden bg-white rounded-lg shadow sm:p-6">
+        <div class="px-4 py-5 overflow-hidden bg-white rounded-lg shadow-sm sm:p-6">
             <dt class="text-sm font-medium text-gray-500 truncate">All Time</dt>
             <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">
                 <h3>{{ $year['current'] }} hits</h3>
@@ -29,7 +29,7 @@
             </dd>
         </div>
 
-        <div class="px-4 py-5 overflow-hidden bg-white rounded-lg shadow sm:p-6">
+        <div class="px-4 py-5 overflow-hidden bg-white rounded-lg shadow-sm sm:p-6">
             <dt class="text-sm font-medium text-gray-500 truncate">Top Endpoints <span class="text-xs">(All Time)</span></dt>
             <dd class="mt-1 text-xs font-semibold tracking-tight text-gray-900">
                 @foreach ($top as $topHit)