🔁 Update tailwindcss to Version v4

Signed-off-by: Pascal Marco Caversaccio <pascal.caversaccio@hotmail.ch>

Author: pcaversaccio

interface/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Matt Solomon
+Copyright (c) 2023-2025 Matt Solomon
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

interface/eslint.config.js

@@ -10,7 +10,7 @@ const eslintConfigPrettier = require("eslint-config-prettier");
 /** @type {import('typescript-eslint').TSESLint.FlatConfig.ConfigArray} */
 module.exports = tseslint.config(
   {
-    files: ["**/*.{js,ts,tsx}"],
+    files: ["**/*.{js,mjs,ts,tsx}"],
     extends: [
       eslint.configs.recommended,
       ...tseslint.configs.recommended,

interface/next.config.js interface/next.config.mjsinterface/next.config.js renamed to interface/next.config.mjs

@@ -33,4 +33,4 @@ const nextConfig =
         distDir: "dist",
       };
 
-module.exports = nextConfig;
+export default nextConfig

interface/package.json

@@ -40,22 +40,23 @@
     "sharp": "^0.33.5"
   },
   "devDependencies": {
-    "@eslint/js": "^9.18.0",
+    "@eslint/js": "^9.19.0",
     "@next/eslint-plugin-next": "^15.1.6",
+    "@tailwindcss/postcss": "^4.0.0",
     "@trivago/prettier-plugin-sort-imports": "^5.2.1",
-    "@types/node": "^22.10.7",
-    "@types/react": "^19.0.7",
+    "@types/node": "^22.10.10",
+    "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.18.0",
+    "eslint": "^9.19.0",
     "eslint-config-next": "^15.1.6",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.1.0",
     "next-seo": "^6.6.0",
     "postcss": "^8.5.1",
     "prettier": "^3.4.2",
-    "prettier-plugin-tailwindcss": "^0.6.10",
-    "tailwindcss": "^3.4.17",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "tailwindcss": "^4.0.0",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.21.0"
   }

interface/postcss.config.js

@@ -1,6 +1,3 @@
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
+  plugins: ["@tailwindcss/postcss"],
 };

interface/src/components/layout/Header.tsx

@@ -73,7 +73,7 @@ export const Header = () => {
       </div>
       <div className="flex items-center justify-center">
         <div className="mx-auto h-auto w-auto rounded-full text-center">
-          <p className="text-accent whitespace-nowrap text-xs opacity-80">
+          <p className="text-accent text-xs whitespace-nowrap opacity-80">
             Deployment Address
           </p>
           <div className="flex items-center">

interface/src/components/ui/Notification.tsx

@@ -66,11 +66,11 @@ export const Notification = ({
             leaveTo="opacity-0"
           >
             <div
-              className={`pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 ${bgColor}`}
+              className={`ring-opacity-5 pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg ring-1 shadow-lg ring-black ${bgColor}`}
             >
               <div className="p-4">
                 <div className="flex items-start">
-                  <div className="flex-shrink-0">
+                  <div className="shrink-0">
                     <Icon
                       className={`h-6 w-6 ${iconColor}`}
                       aria-hidden="true"
@@ -84,10 +84,10 @@ export const Notification = ({
                       {description}
                     </p>
                   </div>
-                  <div className="ml-4 flex flex-shrink-0">
+                  <div className="ml-4 flex shrink-0">
                     <button
                       type="button"
-                      className={`inline-flex rounded-md ${bgColor} ${titleTextColor} text-hover focus:outline-none`}
+                      className={`inline-flex rounded-md ${bgColor} ${titleTextColor} text-hover focus:outline-hidden`}
                       onClick={() => {
                         setShow(false);
                       }}

interface/src/pages/abi.tsx

@@ -161,7 +161,7 @@ const Abi = () => {
       />
 
       <TabGroup selectedIndex={selectedTab} onChange={onTabChange}>
-        <TabList className="space-x-4 overflow-x-auto whitespace-nowrap border-b border-gray-200 dark:border-gray-700 md:flex md:justify-center md:space-x-8">
+        <TabList className="space-x-4 overflow-x-auto border-b border-gray-200 whitespace-nowrap md:flex md:justify-center md:space-x-8 dark:border-gray-700">
           {tabs.map((tab) => {
             return (
               <Tab key={tab.name} className="focus:outline-0">
@@ -170,7 +170,7 @@ const Abi = () => {
                     className={classNames(
                       "group inline-flex items-center px-1 py-3 text-sm font-medium",
                       selected
-                        ? "text-accent border-b-2 border-b-blue-800 outline-none dark:border-b-blue-300"
+                        ? "text-accent border-b-2 border-b-blue-800 outline-hidden dark:border-b-blue-300"
                         : "text-secondary text-hover",
                     )}
                   >
@@ -205,7 +205,7 @@ const Abi = () => {
                 className="relative mt-4 inline-block max-h-screen max-w-full overflow-x-auto overflow-y-auto text-sm shadow-md"
               >
                 <button
-                  className="absolute right-3 top-4 z-10 mr-10 rounded-md border border-gray-500 p-1 hover:border-black focus:outline-0 dark:border-gray-400 hover:dark:border-gray-200"
+                  className="absolute top-4 right-3 z-10 mr-10 rounded-md border border-gray-500 p-1 hover:border-black focus:outline-0 dark:border-gray-400 dark:hover:border-gray-200"
                   style={{
                     // Blur the background behind the copy button.
                     background: "rgba(0, 0, 0, 0.0)",
@@ -218,7 +218,7 @@ const Abi = () => {
                   <ArrowDownTrayIcon className="h-4 w-4" />
                 </button>
                 <button
-                  className="absolute right-3 top-4 z-10 rounded-md border border-gray-500 p-1 hover:border-black focus:outline-0 dark:border-gray-400 hover:dark:border-gray-200"
+                  className="absolute top-4 right-3 z-10 rounded-md border border-gray-500 p-1 hover:border-black focus:outline-0 dark:border-gray-400 dark:hover:border-gray-200"
                   style={{
                     // Blur the background behind the copy button.
                     background: "rgba(0, 0, 0, 0.0)",

interface/src/pages/deployments.tsx

@@ -104,7 +104,7 @@ const Deployments = () => {
         <div className="mt-10 flex items-center justify-center gap-x-6">
           <button
             onClick={() => window.location.reload()}
-            className="rounded-md bg-blue-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500"
+            className="rounded-md bg-blue-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-blue-500"
           >
             Please try again!
           </button>
@@ -146,20 +146,20 @@ const Deployments = () => {
   );
 
   const showDeploymentsDiv = () => (
-    <div className="overflow-hidden rounded-lg shadow ring-1 ring-black ring-opacity-5">
-      <table className="min-w-full divide-y divide-gray-300">
+    <div className="ring-opacity-5 overflow-hidden rounded-lg ring-1 shadow-sm ring-gray-300 dark:ring-gray-700">
+      <table className="min-w-full divide-y divide-gray-300 dark:divide-gray-700">
         <thead className="bg-gray-50 dark:bg-gray-700">
           <tr>
             <th
               scope="col"
-              className="text-primary py-3.5 pl-4 pr-3 text-left text-sm font-semibold sm:pl-6"
+              className="text-primary py-3.5 pr-3 pl-4 text-left text-sm font-semibold sm:pl-6"
             >
               <div
-                className="group inline-flex cursor-pointer rounded-md p-1 hover:bg-gray-200 hover:dark:bg-gray-700"
+                className="group inline-flex cursor-pointer rounded-md p-1 hover:bg-gray-200 dark:hover:bg-gray-700"
                 onClick={() => onHeaderClick("name")}
               >
                 Name
-                <span className="text-primary ml-2 flex-none rounded">
+                <span className="text-primary ml-2 flex-none rounded-sm">
                   <ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
                 </span>
               </div>
@@ -169,11 +169,11 @@ const Deployments = () => {
               className="text-primary px-3 py-3.5 text-left text-sm font-semibold"
             >
               <div
-                className="group inline-flex cursor-pointer rounded-md p-1 hover:bg-gray-200 hover:dark:bg-gray-700"
+                className="group inline-flex cursor-pointer rounded-md p-1 hover:bg-gray-200 dark:hover:bg-gray-700"
                 onClick={() => onHeaderClick("chainId")}
               >
                 Chain ID
-                <span className="text-primary ml-2 flex-none rounded">
+                <span className="text-primary ml-2 flex-none rounded-sm">
                   <ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
                 </span>
               </div>
@@ -183,16 +183,16 @@ const Deployments = () => {
             </th>
           </tr>
         </thead>
-        <tbody className="cursor-pointer divide-y divide-gray-200 bg-white">
+        <tbody className="cursor-pointer divide-y divide-gray-300 bg-white dark:divide-gray-700 dark:bg-gray-800">
           {filteredDeployments.map((deployment) => (
             <tr
               key={`${deployment.chainId}-${deployment.name}`}
-              className="group dark:bg-gray-800"
+              className="group"
               onClick={() =>
                 window.open(deployment.urls[0], "_blank", "noopener,noreferrer")
               }
             >
-              <td className="text-primary flex flex-col whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium sm:pl-6">
+              <td className="text-primary flex flex-col py-4 pr-3 pl-4 text-sm font-medium whitespace-nowrap sm:pl-6">
                 {deployment.name}
                 {deployment.address && (
                   <p className="text-secondary text-xs font-normal">
@@ -203,7 +203,7 @@ const Deployments = () => {
                   </p>
                 )}
               </td>
-              <td className="text-secondary whitespace-nowrap px-3 py-4 text-sm">
+              <td className="text-secondary px-3 py-4 text-sm whitespace-nowrap">
                 {deployment.chainId}
               </td>
               <td className="relative pr-4">
@@ -233,12 +233,12 @@ const Deployments = () => {
   const deploymentsTableDiv = () => (
     <>
       <div className="relative mb-4">
-        <span className="text-secondary pointer-events-none absolute right-4 top-1/2 -translate-y-1/2 transform text-xs opacity-60 dark:opacity-70">
+        <span className="text-secondary pointer-events-none absolute top-1/2 right-4 -translate-y-1/2 transform text-xs opacity-60 dark:opacity-70">
           {modifierKey}K
         </span>
         <input
           type="text"
-          className="block w-full rounded-md border-gray-300 px-4 py-2 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+          className="block w-full rounded-md border-gray-300 bg-white px-4 py-2 shadow-xs focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800"
           placeholder="Network name or chain ID..."
           value={search}
           onChange={(e) => setSearch(e.target.value)}

interface/src/pages/index.tsx

@@ -32,30 +32,34 @@ const Home = () => {
   return (
     <>
       <Head />
-      <div className="mx-auto mt-6 w-full max-w-screen-lg sm:mt-20">
-        <h1 className="text-accent mb-10 text-center text-3xl font-bold sm:text-4xl">
+      <div className="mx-auto mt-6 w-full max-w-(--breakpoint-lg) sm:mt-20">
+        <h1 className="text-accent mb-12 text-center text-3xl font-bold sm:text-4xl">
           {SITE_DESCRIPTION}
         </h1>
-        <dl className="flex flex-wrap justify-center text-center sm:flex-nowrap">
-          {cards.map((card) => (
-            <Link
-              key={card.id}
-              href={card.href}
-              rel={
-                card.href.startsWith("http") ? "noopener noreferrer" : undefined
-              }
-              target={card.href.startsWith("http") ? "_blank" : undefined}
-              className="bg-secondary m-4 w-3/4 cursor-pointer gap-y-4 rounded-xl border border-blue-800/0 p-6 shadow-md hover:border-blue-800/40 dark:border-blue-300/0 dark:shadow-lg dark:hover:border-blue-300/40 sm:w-full"
-            >
-              <dd className="text-primary text-2xl font-semibold tracking-tight sm:text-3xl">
-                {card.title}
-              </dd>
-              <dt className="text-secondary text-base leading-7">
-                {card.subtitle}
-              </dt>
-            </Link>
-          ))}
-        </dl>
+        <div className="mx-auto mt-12 w-full max-w-7xl">
+          <dl className="mx-auto grid w-full grid-cols-1 gap-8 sm:grid-cols-3">
+            {cards.map((card) => (
+              <Link
+                key={card.id}
+                href={card.href}
+                rel={
+                  card.href.startsWith("http")
+                    ? "noopener noreferrer"
+                    : undefined
+                }
+                target={card.href.startsWith("http") ? "_blank" : undefined}
+                className="bg-secondary flex w-full cursor-pointer flex-col items-center justify-center rounded-xl border border-blue-800/0 p-6 shadow-md hover:border-blue-800/40 dark:border-blue-300/0 dark:shadow-lg dark:hover:border-blue-300/40"
+              >
+                <dd className="text-primary text-center text-2xl font-semibold tracking-tight sm:text-3xl">
+                  {card.title}
+                </dd>
+                <dt className="text-secondary text-center text-base leading-7">
+                  {card.subtitle}
+                </dt>
+              </Link>
+            ))}
+          </dl>
+        </div>
       </div>
     </>
   );