fix

package-lock.json

@@ -11108,6 +11108,12 @@
         }
       }
     },
+    "tailwindcss-important": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/tailwindcss-important/-/tailwindcss-important-1.0.0.tgz",
+      "integrity": "sha512-uW7n5Wwb+miuXU48uPqS4QhBNzYrCQZ9tA/46jKJqKYILzXcMnVbWtHYe6Y8KsHOhu900ohNf5sJMwtaBkcJBg==",
+      "dev": true
+    },
     "tapable": {
       "version": "1.1.3",
       "resolved": "https://registry.nlark.com/tapable/download/tapable-1.1.3.tgz",

package.json

@@ -18,17 +18,17 @@
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-router": "~4.5.0",
     "@vue/cli-plugin-typescript": "~4.5.0",
-    "babel-plugin-import": "^1.13.3",
     "@vue/cli-plugin-vuex": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
+    "autoprefixer": "^9.8.6",
+    "babel-plugin-import": "^1.13.3",
     "less": "^3.0.4",
     "less-loader": "^5.0.0",
-    "typescript": "~4.1.5",
-    "autoprefixer": "^9.8.6",
+    "postcss": "^7.0.36",
     "postcss-px-to-viewport-opt": "0.0.4",
     "postcss-viewport-units": "^0.1.6",
-    "postcss": "^7.0.36",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.7"
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.7",
+    "typescript": "~4.1.5"
   }
 }

src/components/NavBar/index.vue

 <template>
   <div class="navbar w-full" style="z-index: 100">
     <div
-      class="h-full theBar flex items-center px-5 justify-center relative"
+      class="
+        h-full
+        theBar
+        flex
+        items-center
+        px-5
+        justify-center
+        relative
+        bg-white
+      "
       v-bind="$attrs"
     >
       <div class="relative w-full flex items-center justify-center">

src/views/withMenu/FinancialManagement/index.vue

@@ -4,7 +4,7 @@
       <NavBar
         title="精选理财"
         :showBackIcon="false"
-        class="bg-app-blue text-white"
+        class="!bg-app-blue text-white"
         :occupyPosition="false"
       />
       <div class="outer1 flex-col">

tailwind.config.js

 const colors = require('tailwindcss/colors')
+const plugin = require('tailwindcss/plugin')
 
 module.exports = {
   purge: [
@@ -34,6 +35,19 @@ module.exports = {
   },
   variants: {
     extend: {},
+    padding: ['responsive', 'important'],
+    backgroundColor: ['responsive', 'important'],
   },
-  plugins: [],
+  plugins: [
+    plugin(function ({ addVariant }) {
+      addVariant('important', ({ container }) => {
+        container.walkRules(rule => {
+          rule.selector = `.\\!${rule.selector.slice(1)}`
+          rule.walkDecls(decl => {
+            decl.important = true
+          })
+        })
+      })
+    }),
+  ],
 }