fix: update to tailwindcss 4

.devcontaier/evcontainer.json

@@ -0,0 +1,11 @@
+{
+  "name": "Node.js 22 Development Environment",
+  "image": "mcr.microsoft.com/devcontainers/javascript-node:22",
+  "settings": {
+    "terminal.integrated.defaultProfile.linux": "/bin/bash"
+  },
+  "extensions": [
+    "dbaeumer.vscode-eslint"
+  ],
+  "postCreateCommand": "npm install -g @kevisual/envision-cli@latest && npm install"
+}

.npmrc

@@ -1,5 +1,3 @@
 //npm.xiongxiao.me/:_authToken=${ME_NPM_TOKEN}
 @abearxiong:registry=https://npm.pkg.github.com
 //registry.npmjs.org/:_authToken=${NPM_TOKEN}
-@build:registry=https://npm.xiongxiao.me
-@kevisual:registry=https://npm.xiongxiao.me

package.json

@@ -5,51 +5,56 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "dev:web": "cross-env WEB_DEV=true vite --mode web",
     "build": "vite build",
     "lint": "eslint .",
     "deploy": "rsync -avz --delete dist/ light:~/apps/ai/dist",
     "preview": "vite preview",
-    "ev": "envision deploy ./dist -k vite-react -v 0.0.1",
+    "pub": "envision deploy ./dist -k vite-react -v 0.0.1",
-    "pub": "npm run build && npm run deploy"
+    "ev": "npm run build && npm run deploy"
   },
+  "stackblitz": {
+    "startCommand": "npm dev:web"
+  },
+  "author": "abearxiong <xiongxiao@xiongxiao.me>",
+  "license": "MIT",
   "dependencies": {
-    "@kevisual/ui": "^0.0.4-alpha-1",
+    "@ant-design/icons": "^5.6.1",
-    "@ant-design/icons": "^5.5.1",
     "@kevisual/query": "0.0.7-alpha.3",
-    "@kevisual/router": "0.0.6-alpha-2",
+    "@kevisual/router": "0.0.6-alpha-5",
     "@kevisual/system-ui": "^0.0.3",
-    "antd": "^5.22.2",
+    "@kevisual/ui": "^0.0.4-alpha-1",
+    "antd": "^5.24.1",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
     "immer": "^10.1.1",
     "lodash-es": "^4.17.21",
-    "nanoid": "^5.0.9",
+    "nanoid": "^5.1.0",
-    "react": "^18.3.1",
+    "react": "^19.0.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.0.0",
-    "react-router": "^7.0.1",
+    "react-router": "^7.2.0",
-    "react-router-dom": "^7.0.1",
+    "react-router-dom": "^7.2.0",
-    "react-toastify": "^10.0.6",
+    "react-toastify": "^11.0.3",
-    "zustand": "^5.0.1"
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
-    "@build/tailwind": "^1.0.2-alpha-2",
+    "@eslint/js": "^9.20.0",
-    "@eslint/js": "^9.15.0",
+    "@kevisual/types": "^0.0.6",
-    "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@tailwindcss/vite": "^4.0.7",
-    "@tailwindcss/typography": "^0.5.15",
+    "@types/node": "^22.13.4",
-    "@types/node": "^22.10.0",
+    "@types/react": "^19.0.10",
-    "@types/react": "^18.3.12",
+    "@types/react-dom": "^19.0.4",
-    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-basic-ssl": "^1.2.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "autoprefixer": "^10.4.20",
+    "eslint": "^9.20.1",
-    "eslint": "^9.15.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
-    "eslint-plugin-react-refresh": "^0.4.14",
+    "globals": "^15.15.0",
-    "globals": "^15.12.0",
+    "tailwind-merge": "^3.0.1",
-    "tailwind-merge": "^2.5.5",
+    "tailwindcss": "^4.0.7",
-    "tailwindcss": "^3.4.15",
     "tailwindcss-animate": "^1.0.7",
-    "typescript": "^5.7.2",
+    "typescript": "^5.7.3",
-    "typescript-eslint": "^8.16.0",
+    "typescript-eslint": "^8.24.1",
-    "vite": "^6.0.1"
+    "vite": "^6.1.1"
   }
 }

src/App.tsx

@@ -1,7 +1,7 @@
 export const App = () => {
   return (
     <div className='bg-slate-200 w-full h-full border'>
-      <div className='loading bg-black'>
+      <div className='test-loading bg-black'>
         <div></div>
       </div>
     </div>

src/index.css

@@ -1,11 +1,7 @@
-@tailwind components;
+@import "tailwindcss";
 
-#root {
-  width: 100%;
-  height: 100%;
-}
 @layer components {
-  .loading-sm {
+  .test-loading {
-    @apply w-4 h-4 border-t-2 border-b-2  rounded-full animate-spin;
+    @apply w-20 h-20 bg-gray-300 rounded-full animate-spin;
   }
 }

src/main.tsx

@@ -1,6 +1,5 @@
 import { createRoot } from 'react-dom/client';
 import { App } from './App.tsx';
-import '@build/tailwind/main.css';
 
 import './index.css';
 

src/modules/basename.ts

@@ -0,0 +1 @@
+export const basename = DEV_SERVER ? '/' : BASE_NAME;

src/vite-env.d.ts

@@ -3,4 +3,4 @@ type SimpleObject = {
   [key: string | number]: any;
 };
 
-declare let DEV_SERVER: boolean;
+declare let BASE_NAME: string;

tailwind.config.js

@@ -1,47 +0,0 @@
-import path from 'path';
-
-const root = path.resolve(process.cwd());
-const contents = ['./src/**/*.{ts,tsx,html}', './src/**/*.css']
-const content = contents.map((item) => path.join(root, item));
-/** @type {import('tailwindcss').Config} */
-export default {
-  darkMode: ['class'],
-  content: content,
-  plugins: [
-    require('@tailwindcss/aspect-ratio'), //
-    require('@tailwindcss/typography'),
-    require('tailwindcss-animate'),
-    require('@build/tailwind'),
-  ],
-  theme: {
-    extend: {
-      fontFamily: {
-        mon: ['Montserrat', 'sans-serif'], // 定义自定义字体族
-        rob: ['Roboto', 'sans-serif'],
-        int: ['Inter', 'sans-serif'],
-        orb: ['Orbitron', 'sans-serif'],
-        din: ['DIN', 'sans-serif'],
-      },
-    },
-    screen: {
-      sm: '640px',
-      // => @media (min-width: 640px) { ... }
-
-      md: '768px',
-      // => @media (min-width: 768px) { ... }
-
-      lg: '1024px',
-      // => @media (min-width: 1024px) { ... }
-
-      xl: '1280px',
-      // => @media (min-width: 1280px) { ... }
-
-      '2xl': '1536px',
-      // => @media (min-width: 1536px) { ... }
-      '3xl': '1920px',
-      // => @media (min-width: 1920) { ... }
-      '4xl': '2560px',
-      // => @media (min-width: 2560) { ... }
-    },
-  },
-};

tsconfig.app.json

@@ -15,9 +15,15 @@
     "isolatedModules": true,
     "moduleDetection": "force",
     "noEmit": true,
+    // "jsx": "react",
+    // "jsxFragmentFactory": "Fragment",
+    // "jsxFactory": "h",
     "jsx": "react-jsx",
     "baseUrl": "./",
-    "types": [],
+    "typeRoots": [
+      "node_modules/@types",
+      "node_modules/@kevisual/types",
+    ],
     "paths": {
       "@/*": [
         "src/*"
@@ -32,5 +38,6 @@
   },
   "include": [
     "src",
+    "typings.d.ts"
   ]
 }

vite.config.ts

@@ -1,26 +1,36 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-import tailwindcss from 'tailwindcss';
-import autoprefixer from 'autoprefixer';
 import path from 'path';
-import nesting from 'tailwindcss/nesting';
+import tailwindcss from '@tailwindcss/vite';
+import pkgs from './package.json' with { type: 'json' };
+import basicSsl from '@vitejs/plugin-basic-ssl';
 
+const version = pkgs.version || '0.0.1';
+
+const isDev = process.env.NODE_ENV === 'development';
+
+const basename = isDev ? '/' : '/username/app';
+const plugins = []
+const isWeb = false;
+if(isWeb) {
+  plugins.push(basicSsl())
+}
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss(), ...plugins],
-  css: {
-    postcss: {
-      // @ts-ignore
-      plugins: [nesting, tailwindcss, autoprefixer],
-    },
-  },
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),
     },
   },
+  base: basename,
   define: {
     DEV_SERVER: JSON.stringify(process.env.NODE_ENV === 'development'),
+    VERSION: JSON.stringify(version),
+    BASE_NAME: JSON.stringify(basename),
+  },
+  build: {
+    target: 'esnext',
   },
   server: {
     port: 6004,