From 3f18bfbaee286415e68f74fa94e4439593be2ed0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Fri, 30 Dec 2022 11:52:56 +0800
Subject: [PATCH] fix: tailwindcss reset Image style (#39914)

* fix: tailwindcss reset

* docs: more info

* chore: comment
---
 components/image/style/index.ts      | 7 +++++++
 docs/react/compatible-style.en-US.md | 2 +-
 docs/react/compatible-style.zh-CN.md | 2 +-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/components/image/style/index.ts b/components/image/style/index.ts
index a6fd56be0b62..ee7e09b3ecb1 100644
--- a/components/image/style/index.ts
+++ b/components/image/style/index.ts
@@ -198,6 +198,13 @@ export const genImagePreviewStyle: GenerateStyle<ImageToken> = (token: ImageToke
             ...genBoxStyle(),
             transition: `transform ${motionDurationSlow} ${motionEaseOut} 0s`,
 
+            // https://github.com/ant-design/ant-design/issues/39913
+            // TailwindCSS will reset img default style.
+            // Let's set back.
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+
             '&::before': {
               display: 'inline-block',
               width: 1,
diff --git a/docs/react/compatible-style.en-US.md b/docs/react/compatible-style.en-US.md
index 6284f09780fc..3521a8a80b88 100644
--- a/docs/react/compatible-style.en-US.md
+++ b/docs/react/compatible-style.en-US.md
@@ -7,7 +7,7 @@ Ant Design supports the last 2 versions of modern browsers. If you need to be co
 
 ### Compatible adjustment
 
-Ant Design default using CSS-in-JS with `:where` Selector to reduce priority to avoid user additional adjust style cost when updating. If you want to support old browser, you can use `@ant-design/cssinjs` to adjust this behavior (Please note keep version align with antd):
+Ant Design default using CSS-in-JS with `:where` Selector to reduce priority to avoid user additional adjust style cost when updating. If you want to support old browser (or some other CSS framework selector priority conflict like TailwindCSS), you can use `@ant-design/cssinjs` to adjust this behavior (Please note keep version align with antd):
 
 ```tsx
 import React from 'react';
diff --git a/docs/react/compatible-style.zh-CN.md b/docs/react/compatible-style.zh-CN.md
index 3373ec0a15a4..c37e19fe606e 100644
--- a/docs/react/compatible-style.zh-CN.md
+++ b/docs/react/compatible-style.zh-CN.md
@@ -7,7 +7,7 @@ Ant Design 支持最近 2 个版本的现代浏览器。如果你需要兼容旧
 
 ### `:where` 选择器
 
-Ant Design 的 CSS-in-JS 默认通过 `:where` 选择器降低 CSS Selector 优先级，以减少用户升级时额外调整自定义样式成本。在某些场景下你如果需要支持的旧版浏览器，你可以使用 `@ant-design/cssinjs` 取消默认的降权操作（请注意版本保持与 antd 一致）：
+Ant Design 的 CSS-in-JS 默认通过 `:where` 选择器降低 CSS Selector 优先级，以减少用户升级时额外调整自定义样式成本。在某些场景下你如果需要支持的旧版浏览器（或者如 TailwindCSS 优先级冲突），你可以使用 `@ant-design/cssinjs` 取消默认的降权操作（请注意版本保持与 antd 一致）：
 
 ```tsx
 import React from 'react';