Using antd icons with CSS layer, tailwindcss v4

[minjinso]

• I upgraded tailwindcss version from v3 to v4, and had to use "layer" feature to adjust priority of tailwind base and antd style. (The App component is wrapped with <ConfigProvider>, <StyleProvider layer={true} />)
• Because antd icon style tag is "prepend" type (

  ant-design-icons/packages/icons-react/src/utils.ts

  Line 174 in 306fe9f

  prepend: true,

  ), the position of style tag is always in the top of head element.
• In ConfigProvider component, it injects IconProvider with layer props(fixed to "antd") when StyleProvider layer={true}. https://github.com/ant-design/ant-design/blob/15bf00d4319584e2648bee9ca11768d83da5c251/components/config-provider/index.tsx#L564
• When that "antd" value is passed to IconProvider, it attach @layer antd to anticon style, and the order of layer will be changed. The layer order setting in global.css is ignored.

The situation above occurred because I used another ConfigProvider in custom component module(ex: ConfigProvider -> StyleProvider -> IconProvider -> ConfigProvider). In the inner ConfigProvider, it doesn't get parent IconContext values. So I solved this problem by removing inner ConfigProvider and setting 'custom name' to IconProvider layer props.
However, with this antd icon "prepend" option, other situations might arise where the antd layer comes to the topmost layer, so I'm raising this as an issue.

This situation can be reproduced by setting IconProvider's layer value to 'antd'.
<IconProvider key="icon-provider" value={{ layer: 'antd' }} />

[anuoua]

+1

[jkomusin-vetro]

We've also run into this issue. I've been unable to find a reliable way to set our layer precedence before the prepended style tag and require antd to have a higher precedence in the layer ordering of our application.

It would be great to either avoid prepending or give callers the option to avoid prepending to set our own precedence.

[JosueGalRe]

We've also run into this issue. I've been unable to find a reliable way to set our layer precedence before the prepended style tag and require antd to have a higher precedence in the layer ordering of our application.

It would be great to either avoid prepending or give callers the option to avoid prepending to set our own precedence.

I have done this and seems to work pretty well:

# main.css
@layer theme, base, antd, components, utilities;

@import "tailwindcss";

# main.tsx
import { StyleProvider } from '@ant-design/cssinjs'
import { IconProvider } from '@ant-design/icons'
import { ConfigProvider } from 'antd'

...
<StyleProvider layer>
  <ConfigProvider>
    <IconProvider value={{ layer: 'antd' }}>
      {children}
    </IconProvider>
  </ConfigProvider>
</StyleProvider>
...

Tested with:
antd v5.24.5, v5.24.6
@tailwindcss/vite v4.0.17, v4.1.1
tailwind v4.0.17, v4.1.1
@ant-design/icons v6.0.0

[GaliMu]

ant-design-icons/packages/icons-react/src/components/IconBase.tsx

Line 60 in 5542f48

useInsertStyles(svgRef);

The problem should be here, useInsertStyles didn't get the value of layer.

[Ray-56]

如果使用 umijs 的话，不要使用配置中提供的 antd theme 否则就会有问题

[mikedesnoo]

I am running into this issue as well.
Another thing I noticed is that the container defined by the StyleProvider is also not used.
If it would, we can just set it to document.body as the container and call it a day.

[avegatolber]

This workaround works for me.

// index.css
.anticon {
    color: revert-layer;
}

[hiSandog]

CSS layer support is easiest to reason about if the icon package documents whether it emits unlayered styles, a named layer, or no CSS side effects at all. With Tailwind v4, layer ordering can change specificity expectations, so a minimal reproduction showing the generated icon style and the Tailwind layer order would help decide whether this belongs in icons, antd, or app-level CSS setup.