Bug: 在引入 tailwindcss 后，Image 组件的预览样式会出现问题（预览的图片偏移了，都在左下角，且看不全了） ❌

[wangrongding]

Reproduction link

https://stackblitz.com/edit/vitejs-vite-s5eias

Steps to reproduce

打开这个链接后，点击加载出来的图片组件，可以看到，预览的图片样式出现问题

What is expected?

正常预览

What is actually happening?

预览样式存在问题（图片偏移了，都在左下角，且看不全了），应该是被 tailwind 影响了，index.css中只要不引入 下面的就没事。

@tailwind base;
@tailwind components;
@tailwind utilities; 

Environment	Info
antd	undefined
React	18.2.0
System	macos
Browser	chrome

[MadCcc]

https://ant-design.antgroup.com/docs/react/compatible-style-cn#where-%E9%80%89%E6%8B%A9%E5%99%A8
提高 antd 样式优先级

[zombieJ]

这个是 tailwind 重置 img 的 css 导致的，提高优先级不行。

[wangrongding]

这个是 tailwind 重置 img 的 css 导致的，提高优先级不行。

我也赞同这个说法，提高优先级的方式不能解决根本问题，而且关闭 :where 降权后会带来其他方面的问题。

[zombieJ]

我也赞同这个说法，提高优先级的方式不能解决根本问题，而且关闭 :where 降权后会带来其他方面的问题。

提高优先级是建议的解法，但是这个 issue 里提高没用。因为 antd 没有对 img 做过样式覆盖，提升了也没用。需要 antd 里补一份样式。

[wangrongding]

提高优先级是建议的解法，但是这个 issue 里提高没用。因为 antd 没有对 img 做过样式覆盖，提升了也没用。需要 antd 里补一份样式。

期待后续被解决，在此感谢~🌸

[jaybowang]

@wangrongding 关掉Tailwind preflight即可，https://tailwindcss.com/docs/preflight#disabling-preflight

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  corePlugins: { preflight: false },
};

测试通过
https://stackblitz.com/edit/vitejs-vite-grnmth?file=tailwind.config.cjs

[wangrongding]

@jaybowong 这将禁用 Tailwind 的全局基本样式，我需要它

[wangrongding]

没事，问题已经被 antd 修复了