If I don't use @apply, what alternatives do I have to achieve this without writing custom CSS?.
Sorry, I used a translator to translate the language. I’m Thai and not very good at English.

There's nothing wrong with writing custom CSS!

u can use variable to save the reusable tailwind classes

const sty = {
btn: "px-4 py-1 border",
input: "...",
...
}

@zunnur-trinovik you're awesome! Thank you, that worked for me

@zunnur-trinovik thanks for your post, this really helps, we still have issues with the global styling from Ant Design though, say we have in our themeconfig the following:

export const customTheme = {
...
token: {
 ...
 linkHoverDecoration: "underline",
 colorLinkHover: "var(--custom-blue)",
 ....
}
...

Then these values don't get picked up by the app.
I'm kinda hesistant to add className="hover:text-(--custom-color-link)! hover:underline!" to every link component in the codebase.

Any ideas how to fix this? If you need more info, let me know.

We're using Vite, React 19, React-Router, Ant Design 5 and trying to implement Tailwind v4.

@remkodejong You can try wrap the <StyleProvider> with <ConfigProvider>

<ConfigProvider theme={{ ...CustomTheme }}>
 <StyleProvider layer>
 <App {...props} />
 </StyleProvider>
</ConfigProvider>

reference: link

This solution did not completely eliminate the problem. The Alert component is unable to read colors correctly and fully during the initial rendering process. I haven't found a solution for this issue yet.

Hi. Your problem is caused by the fact that TailwindCSS uses layers, while the antd package does not. Unlayered styles (like those from antd) are stronger than any layered styles.

I think a more refined solution than using !important is to handle this by placing all antd styles into a layer. Then, you need to set the priority between layers so that TailwindCSS utilities are stronger than antd, but TailwindCSS's preflight (reset CSS) is weaker than antd.

• https://tailwindcss.com/docs/preflight#overview
• https://ant.design/docs/react/compatible-style#layer
• How can I insert a custom layer between TailwindCSS's default base, components and utilities layers?

Your main CSS file use this instead of @import "tailwindcss";:

@layer theme, base, antd, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

And should use StyleProvider:

import { StyleProvider } from '@ant-design/cssinjs';
import { ConfigProvider } from 'antd';
export default () => (
 <StyleProvider layer>
 <ConfigProvider>
 <MyApp />
 </ConfigProvider>
 </StyleProvider>
);

Now it's working. I was adding StyleProvider wrapper in the wrong place. I'm using antd and tailwindcss with nextjs project by following antd docs.