feat: upgrade Tailwind CSS and refactor UI components

- Updated Tailwind CSS to version 4.0.0 and adjusted related configurations.
- Replaced the Tailwind configuration file with a PostCSS plugin integration.
- Enhanced global styles with custom theme variables for better design consistency.
- Refactored UI components to utilize new Tailwind styles and improve responsiveness.
- Cleaned up unused styles and optimized component classes for better performance.

Author: JerryWu1234

packages/ui/package.json

@@ -39,6 +39,8 @@
   "devDependencies": {
     "@devtools/kit": "workspace:*",
     "@qwikest/icons": "^0.0.13",
+    "@tailwindcss/postcss": "^4.0.0",
+    "@tailwindcss/vite": "^4.0.0",
     "@types/eslint": "8.56.10",
     "@types/node": "20.14.11",
     "@types/react": "^18.2.28",
@@ -61,7 +63,7 @@
     "react-dom": "18.2.0",
     "shiki": "^3.8.1",
     "superjson": "^2.2.2",
-    "tailwindcss": "^3.4.6",
+    "tailwindcss": "^4.0.0",
     "typescript": "5.4.5",
     "vite": "7.1.3",
     "vite-hot-client": "2.0.4",

packages/ui/postcss.config.cjs

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

packages/ui/src/components/Tab/Tab.tsx

@@ -15,7 +15,7 @@ export const Tab = component$<TabProps>(({ state, id, title }) => {
       class={{
         'flex h-10 w-10 items-center justify-center rounded-lg p-2.5 transition-all duration-200':
           true,
-        'bg-foreground/5 hover:bg-foreground/10 text-muted-foreground hover:bg-primary-hover hover:text-foreground':
+        'bg-transparent hover:bg-foreground/5 text-muted-foreground hover:text-foreground':
           state.activeTab !== id,
         'shadow-accent/35 bg-accent text-white shadow-lg':
           state.activeTab === id,

packages/ui/src/features/Overview/Overview.tsx

@@ -19,7 +19,7 @@ export const Overview = component$(({ state }: OverviewProps) => {
       <div class="grid grid-cols-1 gap-5 md:grid-cols-3">
         <div
           onClick$={[$(() => pageJump('routes')), stopPropagation]}
-          class="flex cursor-pointer items-center gap-5 rounded-xl border border-border bg-card-item-bg p-5 transition-all duration-200 hover:-translate-y-0.5 hover:bg-card-item-hover-bg"
+           class="flex cursor-pointer items-center gap-5 rounded-xl border border-border bg-card-item-bg p-5 transition-all duration-200 hover:-translate-y-0.5 hover:bg-card-item-hover-bg"
         >
           <div class="bg-foreground/5 rounded-lg border border-border p-3.5">
             <LuFolderTree class="h-6 w-6 text-accent" />
@@ -59,7 +59,7 @@ export const Overview = component$(({ state }: OverviewProps) => {
 
       <div
         onClick$={[$(() => pageJump('packages')), stopPropagation]}
-        class="cursor-pointer space-y-4 rounded-xl border border-border bg-card-item-bg p-5 hover:-translate-y-0.5 hover:bg-card-item-hover-bg"
+        class="cursor-pointer space-y-4 rounded-xl border border-border bg-card-item-bg p-5 hover:-translate-y-0.5 hover:bg-card-item-hover-bg mt-6 md:mt-6"
       >
         <h3 class="text-lg font-semibold">Installed Packages</h3>
         <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
@@ -77,7 +77,7 @@ export const Overview = component$(({ state }: OverviewProps) => {
         </div>
       </div>
 
-      <div class="space-y-4 rounded-xl border border-border bg-card-item-bg p-5">
+      <div class="space-y-4 rounded-xl border border-border bg-card-item-bg p-5 mt-6 md:mt-6">
         <h3 class="text-lg font-semibold">Performance</h3>
         <div class="space-y-3">
           <div class="flex justify-between border-b border-border py-2">

packages/ui/src/features/Packages/components/DependencyCard/DependencyCard.tsx

@@ -79,7 +79,7 @@ export const DependencyCard = component$(({ pkg }: { pkg: Package }) => {
         </p>
 
         {/* Divider */}
-        <div class="border-border/30 border-t" />
+        <div class="border-border border-t" />
 
         {/* Footer with author and links */}
         <div class="flex items-center justify-between gap-3">

packages/ui/src/global.css

@@ -1,10 +1,29 @@
 /**
- * Tailwind CSS imports
+ * Tailwind CSS imports (v4)
  * View the full documentation at https://tailwindcss.com
  */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@custom-variant dark (&:where(:root[data-theme="dark"] &));
+
+@theme {
+  /* default (light) tokens; can be overridden by :root rules below */
+  --color-background: #ffffff;
+  --color-foreground: #000000;
+  --color-primary: #10b981;
+  --color-primary-hover: #f2f2f2;
+  --color-primary-active: #047857;
+  --color-secondary: #6b7280;
+  --color-muted: #9ca3af;
+  --color-muted-foreground: #6b7280;
+  --color-accent: #10b981;
+  --color-border: #e5e7eb;
+  --color-input: #e5e7eb;
+  --color-ring: #10b981;
+  --color-card: #f2f2f2;
+  --color-card-item-bg: rgba(0, 0, 0, 0.02);
+  --color-card-item-hover-bg: rgba(0, 0, 0, 0.03);
+}
 
 :root {
   --theme-name: 'light';
@@ -15,7 +34,7 @@
   --color-primary-active: #047857; /* green-700 */
   --color-secondary: #6b7280; /* Tailwind's secondary.light */
   --color-border: #e5e7eb;
-  --color-card: #f3f4f6;
+  --color-card: #f2f2f2;
 
   /* Specific variables based on existing CSS (light theme equivalents) */
 
@@ -33,6 +52,7 @@
 
   /* Tailwind semantic variables */
   --color-muted: #9ca3af; /* Similar to existing --color-text-subtle */
+  --color-muted-foreground: #6b7280;
   --color-accent: #10b981; /* Green accent */
   --color-input: var(--color-border); /* Alias to border */
   --color-ring: var(--color-primary); /* Alias to primary */

packages/ui/tailwind.config.js

@@ -4,6 +4,7 @@ import tsconfigPaths from 'vite-tsconfig-paths';
 import pkg from './package.json';
 import { qwikDevtools } from '@devtools/plugin';
 import { createRequire } from 'module';
+import tailwindcss from '@tailwindcss/vite';
 const { dependencies = {}, peerDependencies = {} } = pkg as any;
 const makeRegex = (dep) => new RegExp(`^${dep}(/.*)?$`);
 const excludeAll = (obj) => Object.keys(obj).map(makeRegex);
@@ -45,6 +46,6 @@ export default defineConfig(() => {
         ],
       },
     },
-    plugins: [qwikVite(), tsconfigPaths(), qwikDevtools()],
+    plugins: [qwikVite(), tsconfigPaths(), qwikDevtools(), tailwindcss()],
   };
 });