Help! How can I fix the override issue between Tailwind v4 and Ant Design v5?

[skt-developer-007]

I upgraded Tailwind from v3 to v4, and this issue came up.

I removed the padding styles from Ant Design to control them myself and added !important to py-[4rem] to make it override Ant Design’s styles. However, I now want to set a separate style for the Ant Design Input component with py-[1rem], but it’s not working as expected.

How can I fix this issue?

globals.css

@import "tailwindcss";

@layer components {
    .form-control {
        @apply py-[4rem]! px-[.7rem] text-sm outline-none border border-slate-300 hover:border-green-600 rounded-md focus:border-green-600 focus:ring-2 focus:ring-green-100;
    }
}

.ant-input-affix-wrapper {
    padding: 0 !important;
}

page.jsx

<Input
     placeholder='ค้นหา'
     className="form-control py-[1rem]!"
     suffix={
            <div className='bg-web-green rounded-full  cursor-pointer' onClick={() => console.log(1)}>    
                       <FontAwesomeIcon icon={faSearch} className='opacity-50' />
            </div>
      }
/>

[wongjn]

Could you provide a minimal reproducible example please?

---

As an aside, Adam Wathan (creator of Tailwind) does seem to advocate avoiding @apply:

• https://twitter.com/adamwathan/status/1226511611592085504
• https://twitter.com/adamwathan/status/1559250403547652097

[skt-developer-007]

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.

[wongjn]

There's nothing wrong with writing custom CSS!

[adeprastya]

u can use variable to save the reusable tailwind classes

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

[zunnur-trinovik]

Hi, You may try this configuration.

1. First you must wrap your <App/> with <StyleProvider layer>. Source

//App.tsx

import { StyleProvider } from '@ant-design/cssinjs';

<StyleProvider layer>
    <App {...props} />
</StyleProvider>

2. Then, use layer to reorder it to give tailwind priority to override ant design styling. source

/*globals.css*/

@layer  antd, theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);

[kayshapievsky]

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

[remkodejong]

@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.

[zunnur-trinovik]

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

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

reference: link