update: tailwindcss to unocss

package.json

@@ -6,7 +6,7 @@
     "dev": "next dev -p 3001",
     "build": "next build",
     "start": "next start -p 3001",
-    "lint": "eslint src --fix --ext .ts,.tsx,.js,.jsx --max-warnings 0"
+    "lint": "eslint src --fix --ext .ts,.tsx,.js,.jsx,.mdx,.md,.json,.mjs --max-warnings 0"
   },
   "dependencies": {
     "next": "14.1.3",
@@ -20,6 +20,7 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@unocss/postcss": "^0.58.6",
     "autoprefixer": "^10.0.1",
     "eslint": "^8",
     "eslint-config-next": "14.1.3",
@@ -33,8 +34,8 @@
     "postcss-preset-env": "^9.5.1",
     "postcss-px-to-viewport": "^1.1.1",
     "prettier": "^3.2.5",
-    "tailwindcss": "^3.3.0",
+    "typescript": "^5.2.2",
-    "typescript": "^5.2.2"
+    "unocss": "^0.58.6"
   },
   "lint-staged": {
     "src/**/*.{js,jsx,ts,tsx,json}": [

postcss.config.js

@@ -1,6 +1,8 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
+    '@unocss/postcss': {
+      content: ['**/*.{html,js,ts,jsx,tsx}'],
+    },
     autoprefixer: {},
     'postcss-flexbugs-fixes': {},
     'postcss-preset-env': {

shims.d.ts

@@ -0,0 +1,8 @@
+// This File is only needed if you use Attributify
+// Learn more: https://unocss.dev/presets/attributify
+import type { AttributifyAttributes } from 'unocss/preset-attributify';
+
+declare module 'react' {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface HTMLAttributes<T> extends AttributifyAttributes {}
+}

src/app/globals.css

@@ -1,6 +1,5 @@
-@tailwind base;
+@import '@unocss/reset/tailwind.css';
-@tailwind components;
+@unocss all;
-@tailwind utilities;
 
 :root {
   --body-bg-color: #1a1a1a;

src/app/page.tsx

@@ -32,7 +32,7 @@ export default function Home() {
       {/* 首屏 */}
       <div
         ref={firstScreenRef}
-        className="relative w-full min-h-screen flex flex-col items-center bg-[url('/img/index_background.svg')] bg-center bg-cover"
+        className="relative w-full min-h-screen flex flex-col items-center bg-[url(/img/index_background.svg)] bg-center bg-cover"
       >
         {/* title */}
         {!inWX && <h1 className="text-center text-[17px] h-[44px] leading-[44px]">雀乐</h1>}

tailwind.config.ts

@@ -1,20 +0,0 @@
-import type { Config } from 'tailwindcss';
-
-const config: Config = {
-  content: [
-    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/modules/**/*.{js,ts,jsx,tsx,mdx}',
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-      },
-    },
-  },
-  plugins: [],
-};
-export default config;

uno.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig, presetUno, presetAttributify, presetIcons } from 'unocss';
+
+export default defineConfig({
+  presets: [
+    presetUno(),
+    presetAttributify(),
+    presetIcons({
+      extraProperties: {
+        display: 'inline-block',
+        'vertical-align': 'middle',
+      },
+    }),
+  ],
+});