feat: 小程序分包，pageA,pageB页面下使用tailwind就会失效 #5

App.vue

@@ -17,7 +17,4 @@ export default {
 @import "tailwindcss/base";
 @import "tailwindcss/utilities";
 
-page {
-	background-color: gray;
-}
 </style>

pages.json

@@ -13,5 +13,23 @@
 		"navigationBarBackgroundColor": "#F8F8F8",
 		"backgroundColor": "#F8F8F8"
 	},
-	"uniIdRouter": {}
-}
+	"uniIdRouter": {},
+	"subPackages": [
+		{
+			"root": "pagesA",
+			"pages": [
+				{
+					"path": "index"
+				}
+			]
+		},
+		{
+			"root": "pagesB",
+			"pages": [
+				{
+					"path": "index"
+				}
+			]
+		}
+	]
+}

pages/index/index.vue

@@ -1,6 +1,8 @@
 <template>
 	<view class="w-screen flex flex-col items-center">
 		<image class="w-12 h-12" src="../../static/logo.png"></image>
+		<navigator url="/pagesA/index">pagesA</navigator>
+		<navigator url="/pagesB/index">pagesB</navigator>
 		<view>
 			<text class="text-[44px] text-gray-800">{{title}} World</text>
 		</view>

pagesA/index.vue

@@ -0,0 +1,13 @@
+<template>
+    <div class="text-[#654321]">
+        pageA
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped></style>

pagesB/index.vue

@@ -0,0 +1,13 @@
+<template>
+    <div class="text-[#123456]">
+        pageB
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped></style>

tailwind.config.js

@@ -12,6 +12,8 @@ module.exports = {
     content: [
       resolve("./index.html"),
       resolve("./pages/**/*.{vue,js,ts,jsx,tsx,wxml}"),
+      resolve("./pagesA/**/*.{vue,js,ts,jsx,tsx,wxml}"),
+      resolve("./pagesB/**/*.{vue,js,ts,jsx,tsx,wxml}"),
     ],
   },
   darkMode: false, // or 'media' or 'class'