支持CSS嵌套

package-lock.json

@@ -28,6 +28,7 @@
         "autoprefixer": "^10.4.20",
         "npm-run-all2": "^7.0.2",
         "postcss": "^8.5.1",
+        "postcss-import": "^16.1.0",
         "tailwindcss": "^3.4.17",
         "typescript": "~5.6.3",
         "vite": "^6.0.5",
@@ -3638,9 +3639,9 @@
       }
     },
     "node_modules/postcss-import": {
-      "version": "15.1.0",
-      "resolved": "https://registry.npmmirror.com/postcss-import/-/postcss-import-15.1.0.tgz",
-      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "version": "16.1.0",
+      "resolved": "https://registry.npmmirror.com/postcss-import/-/postcss-import-16.1.0.tgz",
+      "integrity": "sha512-7hsAZ4xGXl4MW+OKEWCnF6T5jqBw80/EE9aXg1r2yyn1RsVEU8EtKXbijEODa+rg7iih4bKf7vlvTGYR4CnPNg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3649,7 +3650,7 @@
         "resolve": "^1.1.7"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=18.0.0"
       },
       "peerDependencies": {
         "postcss": "^8.0.0"
@@ -4288,6 +4289,24 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tailwindcss/node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmmirror.com/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
     "node_modules/thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmmirror.com/thenify/-/thenify-3.3.1.tgz",

package.json

@@ -31,6 +31,7 @@
     "autoprefixer": "^10.4.20",
     "npm-run-all2": "^7.0.2",
     "postcss": "^8.5.1",
+    "postcss-import": "^16.1.0",
     "tailwindcss": "^3.4.17",
     "typescript": "~5.6.3",
     "vite": "^6.0.5",

postcss.config.js

@@ -1,5 +1,7 @@
 export default {
   plugins: {
+    'postcss-import': {},
+    'tailwindcss/nesting': {},
     tailwindcss: {},
     autoprefixer: {},
   },

src/App.vue

@@ -26,62 +26,26 @@ import HelloWorld from "./components/HelloWorld.vue";
 header {
 	line-height: 1.5;
 	max-height: 100vh;
-}
-
-.logo {
-	display: block;
-	margin: 0 auto 2rem;
-}
-
-nav {
-	width: 100%;
-	font-size: 12px;
-	text-align: center;
-	margin-top: 2rem;
-}
-
-nav a.router-link-exact-active {
-	color: var(--color-text);
-}
-
-nav a.router-link-exact-active:hover {
-	background-color: transparent;
-}
-
-nav a {
-	display: inline-block;
-	padding: 0 1rem;
-	border-left: 1px solid var(--color-border);
-}
-
-nav a:first-of-type {
-	border: 0;
-}
-
-@media (min-width: 1024px) {
-	header {
-		display: flex;
-		place-items: center;
-		padding-right: calc(var(--section-gap) / 2);
-	}
-
 	.logo {
-		margin: 0 2rem 0 0;
-	}
-
-	header .wrapper {
-		display: flex;
-		place-items: flex-start;
-		flex-wrap: wrap;
+		display: block;
+		margin: 0 auto 2rem;
 	}
-
 	nav {
-		text-align: left;
-		margin-left: -1rem;
-		font-size: 1rem;
-
-		padding: 1rem 0;
-		margin-top: 1rem;
+		width: 100%;
+		font-size: 12px;
+		text-align: center;
+		margin-top: 2rem;
+		a {
+			display: inline-block;
+			padding: 0 1rem;
+			border-left: 1px solid var(--color-border);
+			&:first-of-type {
+				border: 0;
+			}
+			&.router-link-exact-active {
+				color: green;
+			}
+		}
 	}
 }
 </style>