feat: add weapp-tailwindcss integration for uni-app

Install required dependencies, configure PostCSS and Vite plugin, create global app.css entry file, import styles in main.js, and add postinstall patch script.
This commit is contained in:
duanshuwen
2026-07-24 11:54:55 +08:00
parent 72b7557ecf
commit 8048050d02
5 changed files with 1554 additions and 8 deletions

View File

@@ -2,6 +2,7 @@
"name": "YGChatCS", "name": "YGChatCS",
"version": "1.0.0", "version": "1.0.0",
"scripts": { "scripts": {
"postinstall": "node ./node_modules/weapp-tailwindcss/bin/weapp-tailwindcss.js patch",
"dev:app": "uni -p app", "dev:app": "uni -p app",
"dev:app-android": "uni -p app-android", "dev:app-android": "uni -p app-android",
"dev:app-ios": "uni -p app-ios", "dev:app-ios": "uni -p app-ios",
@@ -70,10 +71,13 @@
"@dcloudio/uni-cli-shared": "3.0.0-4070620250821001", "@dcloudio/uni-cli-shared": "3.0.0-4070620250821001",
"@dcloudio/uni-stacktracey": "3.0.0-4070620250821001", "@dcloudio/uni-stacktracey": "3.0.0-4070620250821001",
"@dcloudio/vite-plugin-uni": "3.0.0-4070620250821001", "@dcloudio/vite-plugin-uni": "3.0.0-4070620250821001",
"@tailwindcss/postcss": "^4.3.0",
"@vue/runtime-core": "^3.4.21", "@vue/runtime-core": "^3.4.21",
"@vue/tsconfig": "^0.1.3", "@vue/tsconfig": "^0.1.3",
"sass": "1.58.3", "sass": "1.58.3",
"vite": "5.2.8" "tailwindcss": "^4.3.0",
"vite": "5.2.8",
"weapp-tailwindcss": "^4.12.0"
}, },
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e" "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
} }

7
src/app.css Normal file
View File

@@ -0,0 +1,7 @@
@import "weapp-tailwindcss/index.css";
@source "./**/*.{vue,js,ts}";
@source not "./uni_modules";
@source not "../dist";
@source not "../node_modules";
@source not "../docs";

View File

@@ -1,4 +1,5 @@
import App from "./App"; import App from "./App";
import "./app.css";
import share from "./utils/share"; import share from "./utils/share";
// #ifndef VUE3 // #ifndef VUE3
@@ -32,4 +33,4 @@ export function createApp() {
pinia, pinia,
}; };
} }
// #endif // #endif

View File

@@ -2,6 +2,8 @@ import { defineConfig } from "vite";
import path from "path"; import path from "path";
import uni from "@dcloudio/vite-plugin-uni"; import uni from "@dcloudio/vite-plugin-uni";
import md5 from "md5-hash"; import md5 from "md5-hash";
import tailwindcss from "@tailwindcss/postcss";
import { UnifiedViteWeappTailwindcssPlugin } from "weapp-tailwindcss/vite";
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
@@ -11,6 +13,9 @@ export default defineConfig({
}, },
}, },
css: { css: {
postcss: {
plugins: [tailwindcss()],
},
preprocessorOptions: { preprocessorOptions: {
scss: { scss: {
api: "modern-compiler", api: "modern-compiler",
@@ -18,7 +23,13 @@ export default defineConfig({
}, },
}, },
}, },
plugins: [uni()], plugins: [
uni(),
UnifiedViteWeappTailwindcssPlugin({
rem2rpx: true,
cssEntries: [path.resolve(__dirname, "./src/app.css")],
}),
],
build: { build: {
commonjsOptions: { commonjsOptions: {
transformMixedEsModules: true, transformMixedEsModules: true,

1533
yarn.lock

File diff suppressed because it is too large Load Diff