chore: Upgrade tailwindcss

.gitignore

@@ -8,3 +8,4 @@ out
 *.log*
 .idea
 *.ttf
+party.md

electron-builder.yml

@@ -54,6 +54,7 @@ pkg:
     file: build/background.png
 linux:
   desktop:
+    entry:
       Name: Mihomo Party
       MimeType: 'x-scheme-handler/clash;x-scheme-handler/mihomo'
   target:

electron.vite.config.ts

@@ -1,6 +1,7 @@
 import { resolve } from 'path'
 import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
 import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
 // https://github.com/vdesjs/vite-plugin-monaco-editor/issues/21#issuecomment-1827562674
 import monacoEditorPluginModule from 'vite-plugin-monaco-editor'
 const isObjectWithDefaultFunction = (
@@ -37,6 +38,7 @@ export default defineConfig({
     },
     plugins: [
       react(),
+      tailwindcss(),
       monacoEditorPlugin({
         languageWorkers: ['editorWorkerService', 'typescript', 'css'],
         customDistPath: (_, out) => `${out}/monacoeditorwork`,

package.json

@@ -51,6 +51,7 @@
     "@electron-toolkit/eslint-config-prettier": "^3.0.0",
     "@electron-toolkit/eslint-config-ts": "^3.1.0",
     "@electron-toolkit/tsconfig": "^1.0.1",
+    "@tailwindcss/vite": "^4.1.11",
     "@types/adm-zip": "^0.5.7",
     "@types/express": "^5.0.3",
     "@types/node": "^24.1.0",
@@ -59,7 +60,6 @@
     "@types/react-dom": "^19.1.7",
     "@types/ws": "^8.18.1",
     "@vitejs/plugin-react": "^4.7.0",
-    "autoprefixer": "^10.4.21",
     "cron-validator": "^1.4.0",
     "driver.js": "^1.3.6",
     "electron": "^37.2.5",
@@ -87,7 +87,7 @@
     "react-router-dom": "^7.7.1",
     "react-virtuoso": "^4.13.0",
     "swr": "^2.3.4",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.1.11",
     "tar": "^7.4.3",
     "tsx": "^4.20.3",
     "types-pac": "^1.0.3",

postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {}
-  }
-}

src/renderer/src/App.tsx

@@ -373,13 +373,13 @@ const App: React.FC = () => {
           setSiderWidthValue(e.clientX)
         }
       }}
-      className={`w-full h-[100vh] flex ${resizing ? 'cursor-ew-resize' : ''}`}
+      className={`w-full h-screen flex ${resizing ? 'cursor-ew-resize' : ''}`}
     >
       {siderWidthValue === narrowWidth ? (
         <div style={{ width: `${narrowWidth}px` }} className="side h-full">
           <div className="app-drag flex justify-center items-center z-40 bg-transparent h-[49px]">
             {platform !== 'darwin' && (
-              <MihomoIcon className="h-[32px] leading-[32px] text-lg mx-[1px]" />
+              <MihomoIcon className="h-[32px] leading-[32px] text-lg mx-px" />
             )}
             <UpdaterButton iconOnly={true} />
           </div>
@@ -417,7 +417,7 @@ const App: React.FC = () => {
               className={`flex justify-between p-2 ${!useWindowFrame && platform === 'darwin' ? 'ml-[60px]' : ''}`}
             >
               <div className="flex ml-1">
-                <MihomoIcon className="h-[32px] leading-[32px] text-lg mx-[1px]" />
+                <MihomoIcon className="h-[32px] leading-[32px] text-lg mx-px" />
                 <h3 className="text-lg font-bold leading-[32px]">ihomo Party</h3>
               </div>
               <UpdaterButton />

src/renderer/src/FloatingApp.tsx

@@ -59,9 +59,9 @@ const FloatingApp: React.FC = () => {
   }, [])
 
   return (
-    <div className="app-drag h-[100vh] w-[100vw] overflow-hidden">
+    <div className="app-drag h-screen w-screen overflow-hidden">
-      <div className="floating-bg border-1 border-divider flex rounded-full bg-content1 h-[calc(100%-2px)] w-[calc(100%-2px)]">
+      <div className="floating-bg border border-divider flex rounded-full bg-content1 h-[calc(100%-2px)] w-[calc(100%-2px)]">
-        <div className="flex justify-center items-center h-[100%] aspect-square">
+        <div className="flex justify-center items-center h-full aspect-square">
           <div
             onContextMenu={(e) => {
               e.preventDefault()

src/renderer/src/assets/floating.css

@@ -1,6 +1,8 @@
-@tailwind base;
+@import 'tailwindcss';
-@tailwind components;
+@plugin './hero.ts';
-@tailwind utilities;
+
+@source '../**/*.{js,ts,jsx,tsx}';
+@source '../../../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
 
 .floating-text {
   font-family:

src/renderer/src/assets/hero.ts

@@ -0,0 +1,2 @@
+import { heroui } from '@heroui/react'
+export default heroui()

src/renderer/src/assets/main.css

@@ -1,6 +1,12 @@
-@tailwind base;
+@import 'tailwindcss';
-@tailwind components;
+@plugin './hero.ts';
-@tailwind utilities;
+
+@source '../**/*.{js,ts,jsx,tsx}';
+@source '../../../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
+
+@theme {
+  --default-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
 
 @font-face {
   font-family: 'Noto Color Emoji';

src/renderer/src/components/connections/connection-item.tsx

@@ -39,7 +39,7 @@ const ConnectionItem: React.FC<Props> = (props) => {
                 <Chip
                   color={`${info.isActive ? 'primary' : 'danger'}`}
                   size="sm"
-                  radius="sm"
+                  radius="xs"
                   variant="dot"
                 >
                   {info.metadata.type}({info.metadata.network.toUpperCase()})
@@ -65,16 +65,16 @@ const ConnectionItem: React.FC<Props> = (props) => {
                 <Chip
                   className="flag-emoji text-ellipsis whitespace-nowrap overflow-hidden"
                   size="sm"
-                  radius="sm"
+                  radius="xs"
                   variant="bordered"
                 >
                   {info.chains[0]}
                 </Chip>
-                <Chip size="sm" radius="sm" variant="bordered">
+                <Chip size="sm" radius="xs" variant="bordered">
                   ↑ {calcTraffic(info.upload)} ↓ {calcTraffic(info.download)}
                 </Chip>
                 {info.uploadSpeed !== 0 || info.downloadSpeed !== 0 ? (
-                  <Chip color="primary" size="sm" radius="sm" variant="bordered">
+                  <Chip color="primary" size="sm" radius="xs" variant="bordered">
                     ↑ {calcTraffic(info.uploadSpeed || 0)}/s ↓ {calcTraffic(info.downloadSpeed || 0)}
                     /s
                   </Chip>

src/renderer/src/components/proxies/proxy-item.tsx

@@ -60,7 +60,7 @@ const ProxyItem: React.FC<Props> = (props) => {
       onPress={() => onSelect(group.name, proxy.name)}
       isPressable
       fullWidth
-      shadow="sm"
+      shadow="xs"
       className={`${
         fixed 
           ? 'bg-secondary/30 border-r-2 border-r-secondary border-l-2 border-l-secondary' 
@@ -68,7 +68,7 @@ const ProxyItem: React.FC<Props> = (props) => {
             ? 'bg-primary/30 border-r-2 border-r-primary border-l-2 border-l-primary' 
             : 'bg-content2'
       }`}
-      radius="sm"
+      radius="xs"
     >
     <CardBody className="p-1">
       {proxyDisplayMode === 'full' ? (

src/renderer/src/pages/connections.tsx

@@ -273,7 +273,7 @@ const Connections: React.FC = () => {
         </div>
         <Divider />
       </div>
-      <div className="h-[calc(100vh-100px)] mt-[1px]">
+      <div className="h-[calc(100vh-100px)] mt-px">
         <Virtuoso
           data={filteredConnections}
           itemContent={(i, connection) => (

src/renderer/src/pages/dns.tsx

@@ -264,7 +264,7 @@ const DNS: React.FC = () => {
               {[...values.nameserverPolicy, { domain: '', value: '' }].map(
                 ({ domain, value }, index) => (
                   <div key={index} className="flex mb-2">
-                    <div className="flex-[4]">
+                    <div className="flex-4">
                       <Input
                         size="sm"
                         fullWidth
@@ -281,7 +281,7 @@ const DNS: React.FC = () => {
                       />
                     </div>
                     <span className="mx-2">:</span>
-                    <div className="flex-[6] flex">
+                    <div className="flex-6 flex">
                       <Input
                         size="sm"
                         fullWidth
@@ -332,7 +332,7 @@ const DNS: React.FC = () => {
             <h3 className="mb-2">{t('dns.customHosts.list')}</h3>
             {[...values.hosts, { domain: '', value: '' }].map(({ domain, value }, index) => (
               <div key={index} className="flex mb-2">
-                <div className="flex-[4]">
+                <div className="flex-4">
                   <Input
                     size="sm"
                     fullWidth
@@ -349,7 +349,7 @@ const DNS: React.FC = () => {
                   />
                 </div>
                 <span className="mx-2">:</span>
-                <div className="flex-[6] flex">
+                <div className="flex-6 flex">
                   <Input
                     size="sm"
                     fullWidth

src/renderer/src/pages/logs.tsx

@@ -109,7 +109,7 @@ const Logs: React.FC = () => {
         </div>
         <Divider />
       </div>
-      <div className="h-[calc(100vh-100px)] mt-[1px]">
+      <div className="h-[calc(100vh-100px)] mt-px">
         <Virtuoso
           ref={virtuosoRef}
           data={filteredLogs}

src/renderer/src/pages/mihomo.tsx

@@ -652,7 +652,7 @@ const Mihomo: React.FC = () => {
               const [user, pass] = auth.split(':')
               return (
                 <div key={index} className="flex mb-2">
-                  <div className="flex-[4]">
+                  <div className="flex-4">
                     <Input
                       size="sm"
                       fullWidth
@@ -672,7 +672,7 @@ const Mihomo: React.FC = () => {
                     />
                   </div>
                   <span className="mx-2">:</span>
-                  <div className="flex-[6] flex">
+                  <div className="flex-6 flex">
                     <Input
                       size="sm"
                       fullWidth

src/renderer/src/pages/profiles.tsx

@@ -85,7 +85,7 @@ const Profiles: React.FC = () => {
               <div>
                 {sub.tag?.map((tag) => {
                   return (
-                    <Chip key={tag} size="sm" className="ml-1" radius="sm">
+                    <Chip key={tag} size="sm" className="ml-1" radius="xs">
                       {tag}
                     </Chip>
                   )
@@ -108,7 +108,7 @@ const Profiles: React.FC = () => {
               <div>
                 {sub.tag?.map((tag) => {
                   return (
-                    <Chip key={tag} size="sm" className="ml-1" radius="sm">
+                    <Chip key={tag} size="sm" className="ml-1" radius="xs">
                       {tag}
                     </Chip>
                   )

src/renderer/src/pages/proxies.tsx

@@ -324,7 +324,7 @@ const Proxies: React.FC = () => {
                             <Avatar
                               className="bg-transparent mr-2"
                               size="sm"
-                              radius="sm"
+                              radius="xs"
                               src={
                                 groups[index].icon.startsWith('<svg')
                                   ? `data:image/svg+xml;utf8,${groups[index].icon}`

src/renderer/src/pages/rules.tsx

@@ -38,7 +38,7 @@ const Rules: React.FC = () => {
         </div>
         <Divider />
       </div>
-      <div className="h-[calc(100vh-100px)] mt-[1px]">
+      <div className="h-[calc(100vh-100px)] mt-px">
         <Virtuoso
           data={filteredRules}
           itemContent={(i, rule) => (

tailwind.config.js

@@ -1,14 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-const { heroui } = require('@heroui/react')
-
-module.exports = {
-  content: [
-    './src/renderer/src/**/*.{js,ts,jsx,tsx}',
-    './node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}'
-  ],
-  theme: {
-    extend: {}
-  },
-  darkMode: 'class',
-  plugins: [heroui()]
-}

tsconfig.node.json

@@ -3,6 +3,7 @@
   "include": ["electron.vite.config.*", "src/main/**/*", "src/preload/**/*", "src/shared/**/*"],
   "compilerOptions": {
     "composite": true,
-    "types": ["electron-vite/node"]
+    "types": ["electron-vite/node"],
+    "moduleResolution": "bundler"
   }
 }