chore(deps): bump tailwindcss from 3.4.18 to 4.2.4

apps/metrics/package.json

@@ -21,18 +21,18 @@
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "recharts": "^3.1.0",
-    "tailwindcss": "^3.4.1"
+    "tailwindcss": "^4.2.4"
   },
   "devDependencies": {
     "@babel/core": "^7.29.0",
     "@filecoin-pay/configs": "workspace:*",
     "@rolldown/plugin-babel": "^0.2.3",
+    "@tailwindcss/vite": "^4.2.4",
     "@types/babel__core": "^7.20.5",
     "@types/node": "^24.6.0",
     "@types/react": "^19.1.16",
     "@types/react-dom": "^19.1.9",
     "@vitejs/plugin-react": "^6.0.1",
-    "autoprefixer": "^10.4.21",
     "babel-plugin-react-compiler": "^1.0.0",
     "typescript": "~5.9.3",
     "vite": "^8.0.10"

apps/metrics/src/App.tsx

@@ -7,10 +7,10 @@ import { TrendChart } from "./components/TrendChart";
 
 function App() {
   return (
-    <div className='min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900'>
+    <div className='min-h-screen bg-linear-to-br from-gray-900 via-gray-800 to-gray-900'>
       {/* Background Pattern */}
-      <div className='absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-purple-900/20 via-transparent to-transparent' />
-      <div className='absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_right,_var(--tw-gradient-stops))] from-blue-900/20 via-transparent to-transparent' />
+      <div className='absolute inset-0 bg-[radial-gradient(ellipse_at_top,var(--tw-gradient-stops))] from-purple-900/20 via-transparent to-transparent' />
+      <div className='absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_right,var(--tw-gradient-stops))] from-blue-900/20 via-transparent to-transparent' />
 
       {/* Content */}
       <div className='relative'>

apps/metrics/src/components/HeroStats.tsx

@@ -14,7 +14,7 @@ export const HeroStats: React.FC = () => {
   if (isLoading) {
     return (
       <div className='relative'>
-        <div className='absolute inset-0 bg-gradient-to-r from-purple-500/10 via-blue-500/10 to-teal-500/10 rounded-3xl blur-3xl' />
+        <div className='absolute inset-0 bg-linear-to-r from-purple-500/10 via-blue-500/10 to-teal-500/10 rounded-3xl blur-3xl' />
         <div className='relative bg-gray-900/50 backdrop-blur-sm border border-gray-700/50 rounded-3xl p-8 mb-8'>
           <div className='flex items-center justify-center h-64'>
             <LoadingSpinner size='lg' text='Loading network metrics...' />
@@ -27,7 +27,7 @@ export const HeroStats: React.FC = () => {
   if (isError || !paymentsMetric) {
     return (
       <div className='relative'>
-        <div className='absolute inset-0 bg-gradient-to-r from-purple-500/10 via-blue-500/10 to-teal-500/10 rounded-3xl blur-3xl' />
+        <div className='absolute inset-0 bg-linear-to-r from-purple-500/10 via-blue-500/10 to-teal-500/10 rounded-3xl blur-3xl' />
         <div className='relative bg-gray-900/50 backdrop-blur-sm border border-gray-700/50 rounded-3xl p-8 mb-8'>
           <ErrorBoundary
             error={error as Error}
@@ -45,7 +45,7 @@ export const HeroStats: React.FC = () => {
   return (
     <div className='relative'>
       {/* Background Effects */}
-      <div className='absolute inset-0 bg-gradient-to-r from-purple-500/10 via-blue-500/10 to-teal-500/10 rounded-3xl blur-3xl' />
+      <div className='absolute inset-0 bg-linear-to-r from-purple-500/10 via-blue-500/10 to-teal-500/10 rounded-3xl blur-3xl' />
 
       <motion.div
         initial={{ opacity: 0, y: 40 }}
@@ -59,7 +59,7 @@ export const HeroStats: React.FC = () => {
             initial={{ scale: 0.9, opacity: 0 }}
             animate={{ scale: 1, opacity: 1 }}
             transition={{ duration: 0.6, delay: 0.2 }}
-            className='inline-flex items-center gap-2 bg-gradient-to-r from-purple-500 to-blue-600 bg-clip-text text-transparent text-sm font-semibold mb-4'
+            className='inline-flex items-center gap-2 bg-linear-to-r from-purple-500 to-blue-600 bg-clip-text text-transparent text-sm font-semibold mb-4'
           >
             <Zap className='w-4 h-4' />
             FILECOIN PAYMENTS NETWORK

apps/metrics/src/components/MetricCard.tsx

@@ -37,11 +37,11 @@ export const MetricCard: React.FC<MetricCardProps> = ({
       whileHover={{ y: -4, transition: { duration: 0.2 } }}
       className='relative group'
     >
-      <div className='absolute inset-0 bg-gradient-to-r from-purple-500/20 to-blue-600/20 rounded-2xl blur-xl group-hover:blur-2xl transition-all duration-300 opacity-0 group-hover:opacity-100' />
+      <div className='absolute inset-0 bg-linear-to-r from-purple-500/20 to-blue-600/20 rounded-2xl blur-xl group-hover:blur-2xl transition-all duration-300 opacity-0 group-hover:opacity-100' />
 
       <div className='relative bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 rounded-2xl p-6 hover:border-gray-600/50 transition-all duration-300'>
         <div className='flex items-start justify-between mb-4'>
-          <div className={`p-3 rounded-xl bg-gradient-to-r ${gradient} bg-opacity-20`}>
+          <div className={`p-3 rounded-xl bg-linear-to-r ${gradient} bg-opacity-20`}>
             <Icon className='w-6 h-6 text-white' />
           </div>
           {change && <div className={`text-sm font-medium ${changeColor}`}>{change}</div>}

apps/metrics/src/components/NetworkHealth.tsx

@@ -13,7 +13,7 @@ export const NetworkHealth: React.FC = () => {
     return (
       <div className='bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 rounded-2xl p-6'>
         <div className='flex items-center gap-3 mb-6'>
-          <div className='p-2 rounded-lg bg-gradient-to-r from-green-500 to-teal-600 bg-opacity-20'>
+          <div className='p-2 rounded-lg bg-linear-to-r from-green-500 to-teal-600 bg-opacity-20'>
             <Shield className='w-5 h-5 text-green-400' />
           </div>
           <div>
@@ -32,7 +32,7 @@ export const NetworkHealth: React.FC = () => {
     return (
       <div className='bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 rounded-2xl p-6'>
         <div className='flex items-center gap-3 mb-6'>
-          <div className='p-2 rounded-lg bg-gradient-to-r from-green-500 to-teal-600 bg-opacity-20'>
+          <div className='p-2 rounded-lg bg-linear-to-r from-green-500 to-teal-600 bg-opacity-20'>
             <Shield className='w-5 h-5 text-green-400' />
           </div>
           <div>
@@ -101,7 +101,7 @@ export const NetworkHealth: React.FC = () => {
       className='bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 rounded-2xl p-6'
     >
       <div className='flex items-center gap-3 mb-6'>
-        <div className='p-2 rounded-lg bg-gradient-to-r from-green-500 to-teal-600 bg-opacity-20'>
+        <div className='p-2 rounded-lg bg-linear-to-r from-green-500 to-teal-600 bg-opacity-20'>
           <Shield className='w-5 h-5 text-green-400' />
         </div>
         <div>
@@ -120,7 +120,7 @@ export const NetworkHealth: React.FC = () => {
             className='relative group'
           >
             <div
-              className={`absolute inset-0 bg-gradient-to-r ${metric.bgColor} to-transparent rounded-xl opacity-10 group-hover:opacity-20 transition-opacity duration-300`}
+              className={`absolute inset-0 bg-linear-to-r ${metric.bgColor} to-transparent rounded-xl opacity-10 group-hover:opacity-20 transition-opacity duration-300`}
             />
 
             <div className='relative bg-gray-900/30 border border-gray-700/30 rounded-xl p-4 hover:border-gray-600/50 transition-colors duration-300'>
@@ -155,7 +155,7 @@ export const NetworkHealth: React.FC = () => {
             initial={{ width: 0 }}
             animate={{ width: `${healthScore}%` }}
             transition={{ duration: 1, delay: 1 }}
-            className='bg-gradient-to-r from-green-500 to-teal-500 h-2 rounded-full'
+            className='bg-linear-to-r from-green-500 to-teal-500 h-2 rounded-full'
           />
         </div>
 

apps/metrics/src/components/OperatorLeaderboard.tsx

@@ -15,7 +15,7 @@ export const OperatorLeaderboard: React.FC = () => {
     return (
       <div className='bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 rounded-2xl p-6'>
         <div className='flex items-center gap-3 mb-6'>
-          <div className='p-2 rounded-lg bg-gradient-to-r from-yellow-500 to-orange-600 bg-opacity-20'>
+          <div className='p-2 rounded-lg bg-linear-to-r from-yellow-500 to-orange-600 bg-opacity-20'>
             <Crown className='w-5 h-5 text-yellow-400' />
           </div>
           <div>
@@ -34,7 +34,7 @@ export const OperatorLeaderboard: React.FC = () => {
     return (
       <div className='bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 rounded-2xl p-6'>
         <div className='flex items-center gap-3 mb-6'>
-          <div className='p-2 rounded-lg bg-gradient-to-r from-yellow-500 to-orange-600 bg-opacity-20'>
+          <div className='p-2 rounded-lg bg-linear-to-r from-yellow-500 to-orange-600 bg-opacity-20'>
             <Crown className='w-5 h-5 text-yellow-400' />
           </div>
           <div>
@@ -61,7 +61,7 @@ export const OperatorLeaderboard: React.FC = () => {
     >
       <div className='flex items-center justify-between mb-6'>
         <div className='flex items-center gap-3'>
-          <div className='p-2 rounded-lg bg-gradient-to-r from-yellow-500 to-orange-600 bg-opacity-20'>
+          <div className='p-2 rounded-lg bg-linear-to-r from-yellow-500 to-orange-600 bg-opacity-20'>
             <Crown className='w-5 h-5 text-yellow-400' />
           </div>
           <div>
@@ -81,7 +81,7 @@ export const OperatorLeaderboard: React.FC = () => {
               transition={{ duration: 0.4, delay: 0.1 * index }}
               className='relative group'
             >
-              <div className='absolute inset-0 bg-gradient-to-r from-purple-500/10 to-blue-600/10 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300' />
+              <div className='absolute inset-0 bg-linear-to-r from-purple-500/10 to-blue-600/10 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300' />
 
               <div className='relative flex items-center justify-between p-4 rounded-xl border border-gray-700/30 hover:border-gray-600/50 transition-colors duration-300'>
                 <div className='flex items-center gap-4'>

apps/metrics/src/components/TokenMetrics.tsx

@@ -16,7 +16,7 @@ export const TokenMetrics: React.FC = () => {
     return (
       <div className='bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 rounded-2xl p-6'>
         <div className='flex items-center gap-3 mb-6'>
-          <div className='p-2 rounded-lg bg-gradient-to-r from-blue-500 to-cyan-600 bg-opacity-20'>
+          <div className='p-2 rounded-lg bg-linear-to-r from-blue-500 to-cyan-600 bg-opacity-20'>
             <Coins className='w-5 h-5 text-blue-400' />
           </div>
           <div>
@@ -35,7 +35,7 @@ export const TokenMetrics: React.FC = () => {
     return (
       <div className='bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 rounded-2xl p-6'>
         <div className='flex items-center gap-3 mb-6'>
-          <div className='p-2 rounded-lg bg-gradient-to-r from-blue-500 to-cyan-600 bg-opacity-20'>
+          <div className='p-2 rounded-lg bg-linear-to-r from-blue-500 to-cyan-600 bg-opacity-20'>
             <Coins className='w-5 h-5 text-blue-400' />
           </div>
           <div>
@@ -62,7 +62,7 @@ export const TokenMetrics: React.FC = () => {
     >
       <div className='flex items-center justify-between mb-6'>
         <div className='flex items-center gap-3'>
-          <div className='p-2 rounded-lg bg-gradient-to-r from-blue-500 to-cyan-600 bg-opacity-20'>
+          <div className='p-2 rounded-lg bg-linear-to-r from-blue-500 to-cyan-600 bg-opacity-20'>
             <Coins className='w-5 h-5 text-blue-400' />
           </div>
           <div>
@@ -82,16 +82,16 @@ export const TokenMetrics: React.FC = () => {
               transition={{ duration: 0.4, delay: 0.1 * index }}
               className='relative group'
             >
-              <div className='absolute inset-0 bg-gradient-to-r from-blue-500/10 to-purple-600/10 rounded-xl blur-xl group-hover:blur-2xl transition-all duration-300 opacity-0 group-hover:opacity-100' />
+              <div className='absolute inset-0 bg-linear-to-r from-blue-500/10 to-purple-600/10 rounded-xl blur-xl group-hover:blur-2xl transition-all duration-300 opacity-0 group-hover:opacity-100' />
 
               <div className='relative bg-gray-900/30 border border-gray-700/30 rounded-xl p-5 hover:border-gray-600/50 transition-colors duration-300'>
                 <div className='flex items-center justify-between mb-4'>
                   <div className='flex items-center gap-3'>
                     <div
                       className={`w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold ${
                         token.symbol === "FIL"
-                          ? "bg-gradient-to-r from-blue-500 to-purple-600 text-white"
-                          : "bg-gradient-to-r from-green-500 to-teal-600 text-white"
+                          ? "bg-linear-to-r from-blue-500 to-purple-600 text-white"
+                          : "bg-linear-to-r from-green-500 to-teal-600 text-white"
                       }`}
                     >
                       {token.symbol}

apps/metrics/src/components/TopOperatorCharts.tsx

@@ -98,7 +98,7 @@ export const TopOperatorCharts: React.FC = () => {
       {/* Header with Toggle */}
       <div className='flex items-center justify-between mb-6'>
         <div className='flex items-center gap-3'>
-          <div className='p-2 rounded-lg bg-gradient-to-r from-purple-500 to-pink-600 bg-opacity-20'>
+          <div className='p-2 rounded-lg bg-linear-to-r from-purple-500 to-pink-600 bg-opacity-20'>
             <Crown className='w-5 h-5 text-purple-400' />
           </div>
           <div>

apps/metrics/src/components/TrendChart.tsx

@@ -98,7 +98,7 @@ export const TrendChart: React.FC = () => {
       {/* Header with Toggle */}
       <div className='flex items-center justify-between mb-6'>
         <div className='flex items-center gap-3'>
-          <div className='p-2 rounded-lg bg-gradient-to-r from-orange-500 to-red-600 bg-opacity-20'>
+          <div className='p-2 rounded-lg bg-linear-to-r from-orange-500 to-red-600 bg-opacity-20'>
             <Activity className='w-5 h-5 text-orange-400' />
           </div>
           <div>

apps/metrics/src/index.css

@@ -1,3 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";

apps/metrics/vite.config.ts

@@ -1,10 +1,11 @@
 import babel from "@rolldown/plugin-babel";
+import tailwindcss from "@tailwindcss/vite";
 import react, { reactCompilerPreset } from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react(), babel({ presets: [reactCompilerPreset()] })],
+  plugins: [react(), babel({ presets: [reactCompilerPreset()] }), tailwindcss()],
   optimizeDeps: {
     exclude: ["lucide-react"],
   },

packages/ui/package.json

@@ -38,7 +38,7 @@
     "@types/nprogress": "^0.2.3",
     "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",
-    "tailwindcss": "^4.1.11",
+    "tailwindcss": "^4.2.4",
     "typescript": "^5.9.2"
   },
   "exports": {