diff --git a/.dumi/theme/common/styles/Common.tsx b/.dumi/theme/common/styles/Common.tsx
index c2f9cf7f2b67..2744394b203b 100644
--- a/.dumi/theme/common/styles/Common.tsx
+++ b/.dumi/theme/common/styles/Common.tsx
@@ -1,77 +1,86 @@
-import { css, Global } from '@emotion/react';
 import React from 'react';
+import { css, Global } from '@emotion/react';
 import { useTheme } from 'antd-style';
+import { updateCSS } from 'rc-util/lib/Dom/dynamicCSS';
 
 export default () => {
   const { anchorTop } = useTheme();
 
+  React.useInsertionEffect(() => {
+    updateCSS(`@layer global, antd;`, 'site-global', {
+      prepend: true,
+    });
+  }, []);
+
   return (
     <Global
       styles={css`
-      body,
-      div,
-      dl,
-      dt,
-      dd,
-      ul,
-      ol,
-      li,
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6,
-      pre,
-      code,
-      form,
-      fieldset,
-      legend,
-      input,
-      textarea,
-      p,
-      blockquote,
-      th,
-      td,
-      hr,
-      button,
-      article,
-      aside,
-      details,
-      figcaption,
-      figure,
-      footer,
-      header,
-      hgroup,
-      menu,
-      nav,
-      section {
-        margin: 0;
-        padding: 0;
-      }
+        @layer global {
+          body,
+          div,
+          dl,
+          dt,
+          dd,
+          ul,
+          ol,
+          li,
+          h1,
+          h2,
+          h3,
+          h4,
+          h5,
+          h6,
+          pre,
+          code,
+          form,
+          fieldset,
+          legend,
+          input,
+          textarea,
+          p,
+          blockquote,
+          th,
+          td,
+          hr,
+          button,
+          article,
+          aside,
+          details,
+          figcaption,
+          figure,
+          footer,
+          header,
+          hgroup,
+          menu,
+          nav,
+          section {
+            margin: 0;
+            padding: 0;
+          }
 
-      ul,
-      ol {
-        list-style: none;
-      }
+          ul,
+          ol {
+            list-style: none;
+          }
 
-      img {
-        vertical-align: middle;
-        border-style: none;
-      }
+          img {
+            vertical-align: middle;
+            border-style: none;
+          }
 
-      [id] {
-        scroll-margin-top: ${anchorTop}px;
-      }
+          [id] {
+            scroll-margin-top: ${anchorTop}px;
+          }
 
-      [data-prefers-color='dark'] {
-        color-scheme: dark;
-      }
+          [data-prefers-color='dark'] {
+            color-scheme: dark;
+          }
 
-      [data-prefers-color='light'] {
-        color-scheme: light;
-      }
-    `}
+          [data-prefers-color='light'] {
+            color-scheme: light;
+          }
+        }
+      `}
     />
   );
 };
diff --git a/.dumi/theme/layouts/GlobalLayout.tsx b/.dumi/theme/layouts/GlobalLayout.tsx
index ab1ab33f28c9..c45a6c6881df 100644
--- a/.dumi/theme/layouts/GlobalLayout.tsx
+++ b/.dumi/theme/layouts/GlobalLayout.tsx
@@ -204,6 +204,7 @@ const GlobalLayout: React.FC = () => {
       <StyleProvider
         cache={styleCache}
         linters={[legacyNotSelectorLinter, parentSelectorLinter, NaNLinter]}
+        layer
       >
         <SiteContext.Provider value={siteContextValue}>
           <SiteThemeProvider theme={themeConfig}>
diff --git a/.dumi/theme/plugin.ts b/.dumi/theme/plugin.ts
index bb544dc16e60..f30a91caa07b 100644
--- a/.dumi/theme/plugin.ts
+++ b/.dumi/theme/plugin.ts
@@ -169,7 +169,8 @@ const RoutesPlugin = (api: IApi) => {
         const matchRegex = /<style data-type="antd-cssinjs">([\S\s]+?)<\/style>/;
         const matchList = file.content.match(matchRegex) || [];
 
-        let antdStyle = '';
+        // Init to order the `@layer`
+        let antdStyle = '@layer global, antd;';
 
         matchList.forEach((text) => {
           file.content = file.content.replace(text, '');
diff --git a/components/date-picker/locale/ru_RU.ts b/components/date-picker/locale/ru_RU.ts
index 44f40df517f6..2a1c91260b1e 100644
--- a/components/date-picker/locale/ru_RU.ts
+++ b/components/date-picker/locale/ru_RU.ts
@@ -17,7 +17,20 @@ const locale: PickerLocale = {
     rangeMonthPlaceholder: ['Начальный месяц', 'Конечный месяц'],
     rangeWeekPlaceholder: ['Начальная неделя', 'Конечная неделя'],
     shortWeekDays: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'],
-    shortMonths: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
+    shortMonths: [
+      'Янв',
+      'Фев',
+      'Мар',
+      'Апр',
+      'Май',
+      'Июн',
+      'Июл',
+      'Авг',
+      'Сен',
+      'Окт',
+      'Ноя',
+      'Дек',
+    ],
     ...CalendarLocale,
   },
   timePickerLocale: {
diff --git a/components/form/demo/basic.tsx b/components/form/demo/basic.tsx
index 1f0c76a06851..c6d1b66f6e1d 100644
--- a/components/form/demo/basic.tsx
+++ b/components/form/demo/basic.tsx
@@ -7,11 +7,11 @@ type FieldType = {
   remember?: string;
 };
 
-const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
+const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
   console.log('Success:', values);
 };
 
-const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (errorInfo) => {
+const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
   console.log('Failed:', errorInfo);
 };
 
diff --git a/components/table/hooks/useFilter/FilterDropdown.tsx b/components/table/hooks/useFilter/FilterDropdown.tsx
index 3aa2392b8ce2..cc3522a2c33c 100644
--- a/components/table/hooks/useFilter/FilterDropdown.tsx
+++ b/components/table/hooks/useFilter/FilterDropdown.tsx
@@ -455,7 +455,9 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
             tablePrefixCls={tablePrefixCls}
             locale={locale}
           />
-          {isEmpty ? empty : (
+          {isEmpty ? (
+            empty
+          ) : (
             <Menu
               selectable
               multiple={filterMultiple}
diff --git a/components/theme/util/genComponentStyleHook.tsx b/components/theme/util/genComponentStyleHook.tsx
index a501a1966ed3..7519f3e2e682 100644
--- a/components/theme/util/genComponentStyleHook.tsx
+++ b/components/theme/util/genComponentStyleHook.tsx
@@ -170,6 +170,9 @@ export default function genComponentStyleHook<C extends OverrideComponent>(
       hashId,
       nonce: () => csp?.nonce!,
       clientOnly: options.clientOnly,
+      layer: {
+        name: 'antd',
+      },
 
       // antd is always at top of styles
       order: options.order || -999,
diff --git a/components/theme/util/useResetIconStyle.ts b/components/theme/util/useResetIconStyle.ts
index f31204f49ba0..d34569df80a4 100644
--- a/components/theme/util/useResetIconStyle.ts
+++ b/components/theme/util/useResetIconStyle.ts
@@ -1,6 +1,7 @@
 import { useStyleRegister } from '@ant-design/cssinjs';
-import { resetIcon } from '../../style';
+
 import type { CSPConfig } from '../../config-provider';
+import { resetIcon } from '../../style';
 import useToken from '../useToken';
 
 const useResetIconStyle = (iconPrefixCls: string, csp?: CSPConfig) => {
@@ -14,6 +15,9 @@ const useResetIconStyle = (iconPrefixCls: string, csp?: CSPConfig) => {
       hashId: '',
       path: ['ant-design-icons', iconPrefixCls],
       nonce: () => csp?.nonce!,
+      layer: {
+        name: 'antd',
+      },
     },
     () => [
       {
diff --git a/docs/react/compatible-style.en-US.md b/docs/react/compatible-style.en-US.md
index 04cf206c5941..aaa308ac5926 100644
--- a/docs/react/compatible-style.en-US.md
+++ b/docs/react/compatible-style.en-US.md
@@ -11,9 +11,33 @@ Ant Design supports the last 2 versions of modern browsers. If you need to be co
 
 Please ref [`@ant-design/cssinjs`](https://github.com/ant-design/cssinjs#styleprovider).
 
+## `layer` Downgrade
+
+Ant Design supports configuring `layer` for unified downgrade since `5.17.0`. After the downgrade, the style of antd will always be lower than the default CSS selector priority, so that users can override the style (please be sure to check the browser compatibility of `@layer`):
+
+```tsx
+import { StyleProvider } from '@ant-design/cssinjs';
+
+export default () => (
+  <StyleProvider layer>
+    <MyApp />
+  </StyleProvider>
+);
+```
+
+antd styles will be encapsulated in `@layer` to lower the priority:
+
+```diff
+++  @layer antd {
+      :where(.css-bAMboO).ant-btn {
+        color: #fff;
+      }
+++  }
+```
+
 ## Compatible adjustment
 
-The CSS-in-JS feature of Ant Design uses the ":where" selector by default to lower the CSS selector specificity, reducing the additional cost of adjusting custom styles when upgrading for users. However, the compatibility of the ":where" syntax is relatively poor in older browsers ([compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/:where#browser_compatibility)). In certain scenarios, if you need to support older browsers (or encounter priority conflicts like TailwindCSS), you can use `@ant-design/cssinjs` to disable the default lowering of specificity (please ensure version consistency with antd).
+The CSS-in-JS feature of Ant Design uses the ":where" selector by default to lower the CSS selector specificity, reducing the additional cost of adjusting custom styles when upgrading for users. However, the compatibility of the ":where" syntax is relatively poor in older browsers ([compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/:where#browser_compatibility)). In certain scenarios, if you need to support older browsers, you can use `@ant-design/cssinjs` to disable the default lowering of specificity (please ensure version consistency with antd).
 
 ```tsx
 import { StyleProvider } from '@ant-design/cssinjs';
@@ -147,3 +171,91 @@ root.render(
   </StyleProvider>,
 );
 ```
+
+## Compatible with Third-party Style Libraries
+
+In some cases, you may need antd to coexist with other style libraries, such as `Tailwind CSS`, `Emotion`, `styled-components`, etc. Unlike traditional CSS solutions, these third-party libraries are often not easy to override antd styles by increasing CSS selector priority. You can configure `@layer` for antd to lower its CSS selector weight, and arrange `@layer` order to solve style override problems:
+
+### antd config `@layer`
+
+```tsx
+import { StyleProvider } from '@ant-design/cssinjs';
+
+export default () => (
+  <StyleProvider layer>
+    <MyApp />
+  </StyleProvider>
+);
+```
+
+### TailwindCSS Arrange `@layer`
+
+In global.css, adjust `@layer` to control the order of style override. Place `tailwind-base` before `antd`:
+
+```less
+@layer tailwind-base, antd;
+
+@layer tailwind-base {
+  @tailwind base;
+}
+@tailwind components;
+@tailwind utilities;
+```
+
+### reset.css
+
+If you use antd's `reset.css` style, you need to specify `@layer` for it to prevent the style from overriding antd:
+
+```less
+@layer reset, antd;
+
+@import url(reset.css) layer(reset);
+```
+
+### With other CSS-in-JS libraries
+
+After configuring `@layer` for antd, you don't need to do any additional configuration for other CSS-in-JS libraries. Your CSS-in-JS can completely override antd styles.
+
+### SSR Scene
+
+When using SSR, styles are often rendered inline in HTML through `<style />`. At this time, please make sure that the styles with the specified `@layer` priority order are loaded before `@layer` is used.
+
+#### ❌ Wrong
+
+```html
+<head>
+  <!-- SSR Injection style -->
+  <style>
+    @layer antd {
+      /** ... */
+    }
+  </style>
+
+  <!-- css file contains @layer xxx, antd; -->
+  <link rel="stylesheet" href="/b9a0m0b9o0o3.css" />
+  <!-- or write @layer xxx, antd; in html directly -->
+  <style>
+    @layer xxx, antd;
+  </style>
+</head>
+```
+
+#### ✅ Correct
+
+```html
+<head>
+  <!-- css file contains @layer xxx, antd; -->
+  <link rel="stylesheet" href="/b9a0m0b9o0o3.css" />
+  <!-- or write @layer xxx, antd; in html directly -->
+  <style>
+    @layer xxx, antd;
+  </style>
+
+  <!-- SSR Injection style -->
+  <style>
+    @layer antd {
+      /** ... */
+    }
+  </style>
+</head>
+```
diff --git a/docs/react/compatible-style.zh-CN.md b/docs/react/compatible-style.zh-CN.md
index c049085cbe1d..fd0b28e6399d 100644
--- a/docs/react/compatible-style.zh-CN.md
+++ b/docs/react/compatible-style.zh-CN.md
@@ -11,9 +11,33 @@ Ant Design 支持最近 2 个版本的现代浏览器。如果你需要兼容旧
 
 查看 [`@ant-design/cssinjs`](https://github.com/ant-design/cssinjs#styleprovider).
 
+## `layer` 降权
+
+Ant Design 从 `5.17.0` 起支持配置 `layer` 进行统一降权。经过降权后，antd 的样式将始终低于默认的 CSS 选择器优先级，以便于用户进行样式覆盖（请务必注意检查 `@layer` 浏览器兼容性）：
+
+```tsx
+import { StyleProvider } from '@ant-design/cssinjs';
+
+export default () => (
+  <StyleProvider layer>
+    <MyApp />
+  </StyleProvider>
+);
+```
+
+antd 的样式会被封装在 `@layer` 中，以降低优先级：
+
+```diff
+++  @layer antd {
+      :where(.css-bAMboO).ant-btn {
+        color: #fff;
+      }
+++  }
+```
+
 ## `:where` 选择器
 
-Ant Design 的 CSS-in-JS 默认通过 `:where` 选择器降低 CSS Selector 优先级，以减少用户升级时额外调整自定义样式的成本，不过 `:where` 语法的[兼容性](https://developer.mozilla.org/en-US/docs/Web/CSS/:where#browser_compatibility)在低版本浏览器比较差。在某些场景下你如果需要支持旧版浏览器（或与 [TailwindCSS 优先级冲突](https://github.com/ant-design/ant-design/issues/38794#issuecomment-1328262525)），你可以使用 `@ant-design/cssinjs` 取消默认的降权操作（请注意版本保持与 antd 一致）：
+Ant Design 的 CSS-in-JS 默认通过 `:where` 选择器降低 CSS Selector 优先级，以减少用户升级时额外调整自定义样式的成本，不过 `:where` 语法的[兼容性](https://developer.mozilla.org/en-US/docs/Web/CSS/:where#browser_compatibility)在低版本浏览器比较差。在某些场景下你如果需要支持旧版浏览器，你可以使用 `@ant-design/cssinjs` 取消默认的降权操作（请注意版本保持与 antd 一致）：
 
 ```tsx
 import { StyleProvider } from '@ant-design/cssinjs';
@@ -147,3 +171,91 @@ root.render(
   </StyleProvider>,
 );
 ```
+
+## 兼容三方样式库
+
+在某些情况下，你可能需要 antd 与其他样式库共存，比如 `Tailwind CSS`、`Emotion`、`styled-components` 等。不同于传统 CSS 方案，这些三方库往往不太容易通过提升 CSS 选择器优先级的方式覆盖 antd 的样式。你可以通过为 antd 配置 `@layer` 降低其 CSS 选择器权重，同时通过合理安排 `@layer` 顺序来解决样式覆盖问题：
+
+### antd 配置 `@layer`
+
+```tsx
+import { StyleProvider } from '@ant-design/cssinjs';
+
+export default () => (
+  <StyleProvider layer>
+    <MyApp />
+  </StyleProvider>
+);
+```
+
+### TailwindCSS 排布 `@layer`
+
+在 global.css 中，调整 `@layer` 来控制样式的覆盖顺序。让 `tailwind-base` 置于 `antd` 之前：
+
+```less
+@layer tailwind-base, antd;
+
+@layer tailwind-base {
+  @tailwind base;
+}
+@tailwind components;
+@tailwind utilities;
+```
+
+### reset.css
+
+如果你使用了 antd 的 `reset.css` 样式，你需要为其也指定 `@layer` 以防止将 antd 降权的样式覆盖：
+
+```less
+@layer reset, antd;
+
+@import url(reset.css) layer(reset);
+```
+
+### 其他 CSS-in-JS 库
+
+当你为 antd 配置完 `@layer` 后，你不需要为其他的 CSS-in-JS 库做任何额外的配置。你的 CSS-in-JS 已经可以完全覆盖 antd 的样式了。
+
+### SSR 场景
+
+在 SSR 场景下，样式往往会通过 `<style />` 内联渲染到 HTML 中。此时请务必确保你的样式顺序中指定 `@layer` 优先级顺序的样式在 `@layer` 被使用之前被加载。
+
+#### ❌ 错误的写法
+
+```html
+<head>
+  <!-- SSR 注入样式 -->
+  <style>
+    @layer antd {
+      /** ... */
+    }
+  </style>
+
+  <!-- css 文件中包含 @layer xxx, antd; -->
+  <link rel="stylesheet" href="/b9a0m0b9o0o3.css" />
+  <!-- or 直接书写 @layer xxx, antd; 在 html 中 -->
+  <style>
+    @layer xxx, antd;
+  </style>
+</head>
+```
+
+#### ✅ 正确的写法
+
+```html
+<head>
+  <!-- css 文件中包含 @layer xxx, antd; -->
+  <link rel="stylesheet" href="/b9a0m0b9o0o3.css" />
+  <!-- or 直接书写 @layer xxx, antd; 在 html 中 -->
+  <style>
+    @layer xxx, antd;
+  </style>
+
+  <!-- SSR 注入样式 -->
+  <style>
+    @layer antd {
+      /** ... */
+    }
+  </style>
+</head>
+```
diff --git a/package.json b/package.json
index f58b3d9bb233..0997cae33167 100644
--- a/package.json
+++ b/package.json
@@ -116,7 +116,7 @@
   ],
   "dependencies": {
     "@ant-design/colors": "^7.0.2",
-    "@ant-design/cssinjs": "^1.18.5",
+    "@ant-design/cssinjs": "^1.19.1",
     "@ant-design/icons": "^5.3.6",
     "@ant-design/react-slick": "~1.1.2",
     "@babel/runtime": "^7.24.1",