Upgrade tailwindcss from 3.4.17 to 4.0.8.

As per the recommendations at https://tailwindcss.com/docs/upgrade-guide, I used `npx @tailwindcss/upgrade` to perform the upgrade.
block · Feb 22, 2025 · 68c1a19 · 68c1a19
1 parent b21ab43
commit 68c1a19
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 23 deletions.
diff --git a/config/site/package.json b/config/site/package.json
@@ -1,10 +1,10 @@
 {
   "devDependencies": {
     "@tailwindcss/typography": "0.5.16",
-    "tailwindcss": "3.4.17"
+    "tailwindcss": "4.0.8"
   },
   "scripts": {
-    "build:css": "npx tailwindcss -i ./src/assets/css/tailwind.css -o ./src/assets/css/main.css --minify",
+    "build:css": "npx @tailwindcss/cli -i ./src/assets/css/tailwind.css -o ./src/assets/css/main.css --minify",
     "format:md": "npx prettier --write \"src/**/*.md\""
   }
 }
diff --git a/config/site/src/_includes/cta.html b/config/site/src/_includes/cta.html
@@ -8,7 +8,7 @@ <h2 class="text-3xl font-bold text-white mb-6">
       Get started by installing ElasticGraph with the following command:
     </p>
     <div
-      class="bg-gray-800 dark:bg-gray-900 text-white py-3 px-6 rounded inline-block mb-6">
+      class="bg-gray-800 dark:bg-gray-900 text-white py-3 px-6 rounded-sm inline-block mb-6">
       <code class="font-mono inline-flex items-center">
         gem install elasticgraph
         <button onclick="navigator.clipboard.writeText('gem install elasticgraph');"

diff --git a/config/site/src/_includes/navbar.html b/config/site/src/_includes/navbar.html
@@ -1,5 +1,5 @@
 <!-- Navbar -->
-<nav class="w-full py-4 bg-gray-200 dark:bg-gray-800 shadow">
+<nav class="w-full py-4 bg-gray-200 dark:bg-gray-800 shadow-sm">
   <div class="container mx-auto flex justify-between items-center px-4">
     <div class="text-xl flex items-center space-x-4">
       <a href="{{ '/' | relative_url }}" class="font-bold hover:underline">ElasticGraph</a>

diff --git a/config/site/src/_includes/testimonials.html b/config/site/src/_includes/testimonials.html
@@ -5,7 +5,7 @@ <h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-8">
       What People Are Saying
     </h2>
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-      <div class="bg-gray-100 dark:bg-gray-700 p-6 rounded-lg shadow">
+      <div class="bg-gray-100 dark:bg-gray-700 p-6 rounded-lg shadow-sm">
         <p class="text-lg italic mb-4">
           Just about everything has been thought of and you can go from prototype to fully
           configured OpenSearch and GraphQL infra in a matter of days.
@@ -14,7 +14,7 @@ <h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-8">
           - Nicole W, Software Engineer at Block
         </div>
       </div>
-      <div class="bg-gray-100 dark:bg-gray-700 p-6 rounded-lg shadow">
+      <div class="bg-gray-100 dark:bg-gray-700 p-6 rounded-lg shadow-sm">
         <p class="text-lg italic mb-4">
           ElasticGraph enabled me to build a complex GraphQL API for our Payouts data in
           days. It would have taken me months without it!
@@ -23,7 +23,7 @@ <h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-8">
           - Max N, Software Engineer at Block
         </div>
       </div>
-      <div class="bg-gray-100 dark:bg-gray-700 p-6 rounded-lg shadow">
+      <div class="bg-gray-100 dark:bg-gray-700 p-6 rounded-lg shadow-sm">
         <p class="text-lg italic mb-4">
           Use ElasticGraph and love it? We'd love to hear from you! Send us your feedback.
         </p>

diff --git a/config/site/src/_layouts/markdown.html b/config/site/src/_layouts/markdown.html
@@ -12,7 +12,7 @@
 <body class="{{ site.style.body }}">
   {% include navbar.html %}
 
-  <main class="flex-grow">
+  <main class="grow">
     <div class="container mx-auto px-4 py-8 lg:py-20">
       <article class="prose dark:prose-invert lg:prose-xl">
         <h2>{{ page.title }}</h2>

diff --git a/config/site/src/assets/css/tailwind.css b/config/site/src/assets/css/tailwind.css
@@ -1,3 +1,21 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@plugin '@tailwindcss/typography';
+
+/*
+  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);
+  }
+}
diff --git a/config/site/src/index.html b/config/site/src/index.html
@@ -4,7 +4,7 @@
 ---
 
 <!-- Main Content -->
-<div class="flex-grow flex items-center justify-center py-12">
+<div class="grow flex items-center justify-center py-12">
   <div class="text-center max-w-2xl">
     <p class="text-4xl font-extrabold mb-8">
       Schema-driven, scalable, cloud-native, batteries-included
@@ -17,12 +17,12 @@ <h1 class="text-xl opacity-90 mb-4">
 
     <div class="mt-8 flex justify-center space-x-4">
       <a href="{{ '/getting-started' | relative_url }}"
-        class="bg-blue-600 dark:bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-500 dark:hover:bg-blue-400 transition">
+        class="bg-blue-600 dark:bg-blue-500 text-white py-2 px-4 rounded-sm hover:bg-blue-500 dark:hover:bg-blue-400 transition">
         Get Started
       </a>
 
       <a href="{{ '/docs/main' | relative_url }}"
-        class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 py-2 px-6 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition">
+        class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 py-2 px-6 rounded-sm hover:bg-gray-300 dark:hover:bg-gray-600 transition">
         Documentation
       </a>
     </div>

diff --git a/config/site/tailwind.config.js b/config/site/tailwind.config.js