feat: 支持 tailwindcss & 重构页面样式

yulimchen · Mar 6, 2023 · 982f81b · 982f81b
1 parent abb6c18
commit 982f81b
Show file tree

Hide file tree

Showing 8 changed files with 214 additions and 93 deletions.
diff --git a/package.json b/package.json
@@ -49,6 +49,7 @@
     "postcss": "^8.4.21",
     "postcss-mobile-forever": "^2.3.1",
     "prettier": "^2.7.1",
+    "tailwindcss": "^3.2.7",
     "typescript": "~4.7.4",
     "unplugin-vue-components": "^0.22.12",
     "vite": "^4.1.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/postcss.config.js b/postcss.config.js
@@ -1,5 +1,6 @@
 module.exports = {
   plugins: {
+    tailwindcss: {},
     // 使用 postcss-mobile-to-multi-displays 做 vw 适配，限制最大宽度，兼容桌面端
     "postcss-mobile-forever": {
       rootSelector: "#app", // 视图的根选择器名称

diff --git a/src/main.ts b/src/main.ts
@@ -1,9 +1,11 @@
 import { createApp } from "vue";
-import { store } from "@/store";
+import { store } from "./store";
 // normalize.css
 import "normalize.css/normalize.css";
 // 全局样式
-import "@/styles/index.less";
+import "./styles/index.less";
+// tailwindcss
+import "./styles/tailwind.css";
 // svg icon
 import "virtual:svg-icons-register";
 

diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;