diff --git a/packages/vite/package.json b/packages/vite/package.json
index e411d43cc6c519..5781eeb7a3ee23 100644
--- a/packages/vite/package.json
+++ b/packages/vite/package.json
@@ -105,7 +105,7 @@
     "parse5": "^7.0.0",
     "periscopic": "^3.0.4",
     "picocolors": "^1.0.0",
-    "postcss-import": "^14.1.0",
+    "postcss-import": "^15.0.0",
     "postcss-load-config": "^4.0.1",
     "postcss-modules": "^5.0.0",
     "resolve.exports": "^1.1.0",
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
index d2a0ca6538036c..aebb3286584662 100644
--- a/packages/vite/src/node/plugins/css.ts
+++ b/packages/vite/src/node/plugins/css.ts
@@ -848,6 +848,9 @@ async function compileCSS(
             return path.resolve(resolved)
           }
           return id
+        },
+        nameLayer(index) {
+          return `vite--anon-layer-${getHash(id)}-${index}`
         }
       })
     )
diff --git a/packages/vite/types/shims.d.ts b/packages/vite/types/shims.d.ts
index d90f0bf42c7057..110b34024cd161 100644
--- a/packages/vite/types/shims.d.ts
+++ b/packages/vite/types/shims.d.ts
@@ -47,6 +47,7 @@ declare module 'postcss-import' {
       basedir: string,
       importOptions: any
     ) => string | string[] | Promise<string | string[]>
+    nameLayer: (index: number, rootFilename: string) => string
   }) => Plugin
   export = plugin
 }
diff --git a/playground/css/__tests__/css.spec.ts b/playground/css/__tests__/css.spec.ts
index 0053b184e8b197..f46e6d0bfdbabc 100644
--- a/playground/css/__tests__/css.spec.ts
+++ b/playground/css/__tests__/css.spec.ts
@@ -259,6 +259,11 @@ test.runIf(isBuild)('@charset hoist', async () => {
   })
 })
 
+test('layers', async () => {
+  expect(await getColor('.layers-blue')).toMatch('blue')
+  expect(await getColor('.layers-green')).toMatch('green')
+})
+
 test('@import dependency w/ style entry', async () => {
   expect(await getColor('.css-dep')).toBe('purple')
 })
diff --git a/playground/css/index.html b/playground/css/index.html
index 39e4305ceda7b8..61d0c2edce5bb8 100644
--- a/playground/css/index.html
+++ b/playground/css/index.html
@@ -99,6 +99,12 @@ <h1>CSS</h1>
   <p>CSS with @charset:</p>
   <pre class="charset-css"></pre>
 
+  <p>
+    @import with layers:
+    <span class="layers-blue">blue</span>
+    <span class="layers-green">green</span>
+  </p>
+
   <p class="css-dep">
     @import dependency w/ style entrypoints: this should be purple
   </p>
diff --git a/playground/css/layered/blue.css b/playground/css/layered/blue.css
new file mode 100644
index 00000000000000..faa644dd73ce2d
--- /dev/null
+++ b/playground/css/layered/blue.css
@@ -0,0 +1,5 @@
+@media screen {
+  .layers-blue {
+    color: blue;
+  }
+}
diff --git a/playground/css/layered/green.css b/playground/css/layered/green.css
new file mode 100644
index 00000000000000..15a762b7572e0b
--- /dev/null
+++ b/playground/css/layered/green.css
@@ -0,0 +1,5 @@
+@media screen {
+  .layers-green {
+    color: green;
+  }
+}
diff --git a/playground/css/layered/index.css b/playground/css/layered/index.css
new file mode 100644
index 00000000000000..49756673b674d4
--- /dev/null
+++ b/playground/css/layered/index.css
@@ -0,0 +1,13 @@
+@layer base;
+
+@import './blue.css' layer;
+@import './green.css' layer;
+
+@layer base {
+  .layers-blue {
+    color: black;
+  }
+  .layers-green {
+    color: black;
+  }
+}
diff --git a/playground/css/main.js b/playground/css/main.js
index f767a3d9b9674d..39ccd916467faf 100644
--- a/playground/css/main.js
+++ b/playground/css/main.js
@@ -44,6 +44,8 @@ text('.modules-inline', inlineMod)
 import charset from './charset.css'
 text('.charset-css', charset)
 
+import './layered/index.css'
+
 import './dep.css'
 import './glob-dep.css'
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 087c7d3db004d8..cbe3f6bbf6e4c3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -252,7 +252,7 @@ importers:
       periscopic: ^3.0.4
       picocolors: ^1.0.0
       postcss: ^8.4.16
-      postcss-import: ^14.1.0
+      postcss-import: ^15.0.0
       postcss-load-config: ^4.0.1
       postcss-modules: ^5.0.0
       resolve: ^1.22.1
@@ -314,7 +314,7 @@ importers:
       parse5: 7.0.0
       periscopic: 3.0.4
       picocolors: 1.0.0
-      postcss-import: 14.1.0_postcss@8.4.16
+      postcss-import: 15.0.0_postcss@8.4.16
       postcss-load-config: 4.0.1_postcss@8.4.16
       postcss-modules: 5.0.0_postcss@8.4.16
       resolve.exports: 1.1.0
@@ -7269,7 +7269,7 @@ packages:
     dev: true
 
   /pify/2.3.0:
-    resolution: {integrity: sha1-7RQaasBDqEnqWISY59yosVMw6Qw=}
+    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
 
   /pify/3.0.0:
@@ -7323,9 +7323,9 @@ packages:
       read-cache: 1.0.0
       resolve: 1.22.1
 
-  /postcss-import/14.1.0_postcss@8.4.16:
-    resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
-    engines: {node: '>=10.0.0'}
+  /postcss-import/15.0.0_postcss@8.4.16:
+    resolution: {integrity: sha512-Y20shPQ07RitgBGv2zvkEAu9bqvrD77C9axhj/aA1BQj4czape2MdClCExvB27EwYEJdGgKZBpKanb0t1rK2Kg==}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
       postcss: ^8.0.0
     dependencies:
@@ -7770,7 +7770,7 @@ packages:
     dev: false
 
   /read-cache/1.0.0:
-    resolution: {integrity: sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=}
+    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
     dependencies:
       pify: 2.3.0