ant-design / ant-design

An enterprise-class UI design language and React UI library
https://ant.design
MIT License
90.44k stars 46.44k forks source link

Antd reset.css is not imported when using as layer #48762

Closed AsuraKev closed 1 week ago

AsuraKev commented 2 weeks ago

Reproduction link

https://ant.design/docs/react/compatible-style#layer-downgrade

Steps to reproduce

following the doc and added the following code:

Order of style precedence Tailwind -> reset css -> antd

@layer tailwind-base, reset, antd; @layer tailwind-base { @tailwind base; }

@import url('antd/dist/reset.css') layer(reset); @tailwind components; @tailwind utilities;

What is expected?

Expect that style layer are applied and style overwrite appropriately

What is actually happening?

Reset css style is not being applied at all

Environment Info
antd 5.17.0
React 18.2
System web
Browser chrome
AsuraKev commented 2 weeks ago

Able to see Layer tailwind and antd being applied but Layer reset is missing

image

AsuraKev commented 2 weeks ago

Or tried import reset css first but antd styles are being overwritten by reset even the order specified is correct

image image

afc163 commented 1 week ago

@AsuraKev Did you resolve it? Why did you close this issue?

AsuraKev commented 1 week ago

Hi. Yes, after restarting the solution it worked as expected. The reset css import has to come last otherwise tailwind still overrides even if you defined the order as @layer tailwind-base, reset, antd

thanks