Migrate to tailwindcss 4

Author: robertying

app/globals.css

@@ -1,6 +1,16 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@plugin '@tailwindcss/typography';
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
 
 @layer base {
   body {

components/DropdownSearch.tsx

@@ -45,7 +45,7 @@ const DropdownSearch: React.FC<DropdownSearchProps> = ({
     <div className="relative flex items-center">
       <input
         ref={inputRef}
-        className="bg-gray-100 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-600 font-semibold text-sm py-1 px-2 rounded w-full"
+        className="bg-gray-100 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-600 font-semibold text-sm py-1 px-2 rounded-sm w-full"
         type="text"
         placeholder={placeholder}
         value={searchQuery}
@@ -78,7 +78,7 @@ const DropdownSearch: React.FC<DropdownSearchProps> = ({
       >
         <div
           className={
-            "bg-white dark:bg-black shadow-lg dark:shadow-none dark:border-gray-600 dark:border rounded text-sm " +
+            "bg-white dark:bg-black shadow-lg dark:shadow-none dark:border-gray-600 dark:border rounded-sm text-sm " +
             (searchQuery ? "" : "invisible")
           }
           style={{ width }}

components/GPUCovidLineChart.tsx

@@ -431,7 +431,7 @@ const GPUCovidLineChart: React.FC<GPUCovidLineChartProps> = ({
           <Chip label={selectedCountries[0]} />
           {showCustomizedControls && (
             <button
-              className="bg-gray-200 hover:bg-gray-300 active:bg-opacity-60 dark:bg-gray-700 dark:hover:bg-gray-600 dark:active:bg-opacity-60 font-semibold text-sm py-1 px-2 w-44 rounded"
+              className="bg-gray-200 hover:bg-gray-300 active:bg-opacity-60 dark:bg-gray-700 dark:hover:bg-gray-600 dark:active:bg-opacity-60 font-semibold text-sm py-1 px-2 w-44 rounded-sm"
               onClick={handleToggleCovidDates}
             >
               Toggle COVID-19 Dates
@@ -506,7 +506,7 @@ const GPUCovidLineChart: React.FC<GPUCovidLineChartProps> = ({
           {...popperAttributes.popper}
         >
           {hoveredDate && (
-            <div className="bg-white dark:bg-black rounded shadow-lg dark:shadow-none dark:border-gray-600 dark:border p-3 space-y-2">
+            <div className="bg-white dark:bg-black rounded-sm shadow-lg dark:shadow-none dark:border-gray-600 dark:border p-3 space-y-2">
               <div className="text-sm font-semibold">
                 {dayjs(hoveredDate).format("MMM YYYY")}
               </div>

components/GPUPerformanceShareScatterPlot.tsx

@@ -263,7 +263,7 @@ const GPUPerformanceShareScatterPlot: React.FC<
               onChange={handleDateChange}
             />
             <button
-              className="bg-gray-200 hover:bg-gray-300 active:bg-opacity-60 dark:bg-gray-700 dark:hover:bg-gray-600 dark:active:bg-opacity-60 font-semibold text-base py-1 px-2 w-20 rounded"
+              className="bg-gray-200 hover:bg-gray-300 active:bg-opacity-60 dark:bg-gray-700 dark:hover:bg-gray-600 dark:active:bg-opacity-60 font-semibold text-base py-1 px-2 w-20 rounded-sm"
               onClick={handleStartStop}
             >
               {playing ? "Pause" : "Resume"}
@@ -312,7 +312,7 @@ const GPUPerformanceShareScatterPlot: React.FC<
         {...popperAttributes.popper}
       >
         {popperReferenceElement && (
-          <div className="bg-white dark:bg-black rounded shadow-lg dark:shadow-none dark:border-gray-600 dark:border p-2">
+          <div className="bg-white dark:bg-black rounded-sm shadow-lg dark:shadow-none dark:border-gray-600 dark:border p-2">
             <div className="text-sm font-semibold">
               {(popperReferenceElement as any).__data__.name}
             </div>

components/GPUShareCryptoPieChart.tsx

@@ -333,7 +333,7 @@ const GPUShareCryptoPieChart: React.FC<GPUShareCryptoPieChartProps> = ({
         {...popperAttributes.popper}
       >
         {popperReferenceElement && (
-          <div className="bg-white dark:bg-black rounded shadow-lg dark:shadow-none dark:border-gray-600 dark:border p-2">
+          <div className="bg-white dark:bg-black rounded-sm shadow-lg dark:shadow-none dark:border-gray-600 dark:border p-2">
             <div className="text-sm font-semibold">
               {(popperReferenceElement as any).__data__.data.name}
             </div>

components/GPUShareTreeMap.tsx

@@ -277,7 +277,7 @@ const GPUShareTreeMap: React.FC<GPUShareTreeMapProps> = ({
         {...popperAttributes.popper}
       >
         {popperReferenceElement && (
-          <div className="bg-white dark:bg-black text-black dark:text-white rounded shadow-lg dark:shadow-none dark:border-gray-600 dark:border p-2">
+          <div className="bg-white dark:bg-black text-black dark:text-white rounded-sm shadow-lg dark:shadow-none dark:border-gray-600 dark:border p-2">
             <div className="text-sm font-semibold">
               {(popperReferenceElement as any).__data__.data.name}
             </div>

postcss.config.js

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