New ant design version 5.0.0 is confilicting with tailwindcss #38794

rizwan92 · 2022-11-21T08:52:11Z

Reproduction link

code sandbox reproduction

Steps to reproduce

<Button type="primary> Button button primary is not working

What is expected?

Button primary should work

What is actually happening?

Button Primary is not right output

Environment	Info
antd	5.0.0
React	18
System	mac os
Browser	chrome

please fix it

github-actions · 2022-11-21T08:53:52Z

Hello @rizwan92. Please provide a online reproduction by forking codesandbox of antd@5.x or antd@4.x, or provide a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 3 days.

你好 @rizwan92, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击这里创建一个 antd@5.x 或 antd@4.x 的 codesandbox，或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。

rizwan92 · 2022-11-21T09:22:15Z

reproduction link added

sherali-1 · 2022-11-21T10:19:33Z

yes @li-jia-nan's solution is working for me previous version and after migrating to new 5.0 version still working

MadCcc · 2022-11-22T02:59:40Z

It's not issue with antd since tailwindcss's preflight override the style of Button. The priority of css selector are the same.

rizwan92 · 2022-11-22T10:04:55Z

@li-jia-nan preflight: false tailwind border not working and may more feature not working in tailwind

and one more thing as you can see my primary colour is different in the antd config provider in the reproduction link but form input element has blue border color when we focus on it

Damienbelingheri · 2022-11-24T15:38:18Z

@li-jia-nan preflight: false tailwind border not working and may more feature not working in tailwind

and one more thing as you can see my primary colour is different in the antd config provider in the reproduction link but form input element has blue border color when we focus on it

Same problem here ! Can you please reopen the issue @MadCcc ?

li-jia-nan · 2022-11-24T15:41:16Z

reopen

phatify · 2022-11-27T14:39:15Z

facing the same issue

phatify · 2022-11-27T14:40:55Z

reopen

@li-jia-nan we need a patched update soon!

phatify · 2022-11-27T14:49:41Z

Ohhh! I fixed this issue by using StyleProvider, it work like a charm:

<ConfigProvider
  theme={{
    token: {
      colorPrimary: "#000",
    },
  }}
>
  <StyleProvider hashPriority="high">
    <RootApp />
  </StyleProvider>
</ConfigProvider>

My Reproduction link demo:
https://stackblitz.com/edit/nextjs-6j8zb7?file=pages/_app.js

MadCcc · 2022-11-27T14:58:19Z

Ohhh! I fixed this issue by using StyleProvider, it work like a charm:
<StyleProvider hashPriority="high">
    <RootApp />
</StyleProvider>

Yes, this could help solve the problem by raise the priority of antd's selector. Since we do not have better solution for mixed style with tailwindcss, this may be the most suitable way to fix it. But you should be aware of the high priority brought by hash class, it may cause some other effect in style. Ref: https://ant.design/docs/react/customize-theme#compatible-adjustment

Going to close this issue with possible solution. Feel free to open new issue if encounter with other problems.

zombieJ · 2022-11-27T14:59:08Z

Though the StyleProvider with hashPriority="high" is design for legacy browser. But it seems also resolve this problem:
https://ant.design/docs/react/customize-theme#compatible-adjustment

Vincz · 2022-12-09T08:44:14Z

The StyleProvider solution was working a couple of days ago, but it doesn't seems to work anymore.

yf-hk · 2022-12-11T06:38:08Z

Any updates?

chunsch · 2022-12-11T07:05:00Z

One way is to configuration Important of Tailwind CSS, let Tailwind CSS a higher priority.

// tailwind.config.js

module.exports = {
// ...other

  corePlugins: {
// Remove Tailwind CSS's preflight style so it can use the antd's preflight instead (reset.css).
    preflight: false
  },
  important: '#app',

// ...other
}

// pages/_document.tsx or app/layout.tsx

<body id="app">
...
</body>

/* globals.css */

@import 'antd/dist/reset.css';

// fix Tailwind CSS border styles,form Tailwind CSS's preflight
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: theme('borderColor.DEFAULT', currentColor); /* 2 */
}

::before,
::after {
  --tw-content: '';
}

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

KhokharJunaid · 2022-12-12T06:38:49Z

You can close preflight in tailwind.config.cjs:

// tailwind.config.cjs
module.exports = {
  corePlugins: {
    preflight: false,
  },
};

Thanks, bro it is really working for me.

phatify · 2022-12-19T10:43:25Z

The StyleProvider solution was working a couple of days ago, but it doesn't seems to work anymore.

@Vincz what's going on with you ?

phatify · 2022-12-19T10:45:59Z

You can close preflight in tailwind.config.cjs:
// tailwind.config.cjs
module.exports = {
  corePlugins: {
    preflight: false,
  },
};
Thanks, bro it is really working for me.

@KhokharJunaid keep in mind that disabling preflight is not a good idea, because you must be re-develop base styles global when preflight disabled.
If preflight is disabled, you will have to write more className (e.g: border-solid, divider, ... ) and more customize.

gavinliu6 · 2022-12-22T05:42:00Z

<StyleProvider hashPriority="high">...</StyleProvider> doesn't work now.

phatify · 2022-12-22T11:20:12Z

<StyleProvider hashPriority="high">...</StyleProvider> doesn't work now.

doesn't work? can you give me reproduction link?

zombieJ · 2022-12-22T14:14:54Z

Hi, pls confirm with @ant-design/cssinjs version which should match with antd used.

Time1sMoney · 2023-07-27T06:22:39Z

So is there an optimal solution? i use antd@5.7.2 and tailwindcss@3.3.2👀

yunsii · 2023-08-19T03:38:25Z

I have made a postcss plugin postcss-antd-fixes tries to process conflicts of antd with any others global CSS reset, support TailwindCSS for now. Online example: https://stackblitz.com/edit/postcss-antd-fixes?file=postcss.config.js

20230924 Update

I just found that there is also a anchor style conflict, antd will generate link style like this

And tailwind has related anchor reset css: https://github.com/tailwindlabs/tailwindcss/blob/b33c30284f8a857a94c5dece88d489a7589dfaf6/src/css/preflight.css#L88

a {
  color: inherit;
  text-decoration: inherit;
}

So I add new fix function to resolve it, make anchors style under any antd components normal as expected, online example updated.

zanniboni · 2023-09-19T15:57:48Z

any updates on this issue?

FeiPengDev · 2023-09-20T21:23:26Z

any updates on this issue?

yunsii · 2023-09-24T11:00:42Z

I have made a postcss plugin postcss-antd-fixes tries to process conflicts of antd with any others global CSS reset, support TailwindCSS for now. Online example: stackblitz.com/edit/postcss-antd-fixes?file=postcss.config.js

20230924 Update

I just found that there is also a anchor style conflict, antd will generate link style like this

And tailwind has related anchor reset css: tailwindlabs/tailwindcss@b33c302/src/css/preflight.css#L88
a {
  color: inherit;
  text-decoration: inherit;
}
So I add new fix function to resolve it, make anchors style under any antd components normal as expected, online example updated.

FYI, There is a anchor style conflict to be fixed.

EdwardMoMo · 2023-10-05T12:25:59Z

I have made a postcss plugin postcss-antd-fixes tries to process conflicts of antd with any others global CSS reset, support TailwindCSS for now. Online example: stackblitz.com/edit/postcss-antd-fixes?file=postcss.config.js

20230924 Update

I just found that there is also a anchor style confilict, antd will generate link style like this
And tailwind has related anchor reset css: tailwindlabs/tailwindcss@b33c302/src/css/preflight.css#L88
a {
  color: inherit;
  text-decoration: inherit;
}
So I add new fix function to resolve it, make anchors style under any antd components normal as expected, online example updated.
FYI, There is a anchor style conflict to be fixed.

Hi, @yunsii May I know if you fixed this anchor style conflict?

yunsii · 2023-10-05T13:51:36Z

@EdwardMoMo As a non-native English speaker, maybe my expression is not clear? I had fixed and released with postcss-antd-fixes@0.2.0

EdwardMoMo · 2023-10-05T15:42:56Z

Great, thanks, I noticed the new commit of your plugin.

dananjaya6005 · 2023-12-12T10:45:28Z

guys

Ohhh! I fixed this issue by using StyleProvider, it work like a charm:
<ConfigProvider
    theme={{
        token: {
            colorPrimary: '#000000',
        },
    }}
>
    <StyleProvider hashPriority="high">
        <RootApp />
    </StyleProvider>
</ConfigProvider>
My Reproduction link demo: https://stackblitz.com/edit/nextjs-6j8zb7?file=pages/_app.js

this one is working perfectly. no need to disable tailwindcss's preflight. Also, disabling preflight is not recommended.It can be affect to native tailwind style

BarrySong97 · 2023-12-19T01:07:49Z

Ohhh! I fixed this issue by using StyleProvider, it work like a charm:
<ConfigProvider
    theme={{
        token: {
            colorPrimary: '#000000',
        },
    }}
>
    <StyleProvider hashPriority="high">
        <RootApp />
    </StyleProvider>
</ConfigProvider>
My Reproduction link demo: https://stackblitz.com/edit/nextjs-6j8zb7?file=pages/_app.js

This worked for me well.

kaustubhxd · 2024-01-21T17:17:30Z

I gave up after trying everything for fixing my button color. I went with this in global.css

.ant-btn-primary { background-color: #1677ff !important; }

jagaa999 · 2024-01-26T06:38:17Z

I gave up after trying everything for fixing my button color. I went with this in global.css

.ant-btn-primary { background-color: #1677ff !important; }

maybe me too

jagaa999 · 2024-01-26T06:53:28Z

I have made a postcss plugin postcss-antd-fixes tries to process conflicts of antd with any others global CSS reset, support TailwindCSS for now. Online example: https://stackblitz.com/edit/postcss-antd-fixes?file=postcss.config.js

20230924 Update

I just found that there is also a anchor style conflict, antd will generate link style like this

And tailwind has related anchor reset css: https://github.com/tailwindlabs/tailwindcss/blob/b33c30284f8a857a94c5dece88d489a7589dfaf6/src/css/preflight.css#L88
a {
  color: inherit;
  text-decoration: inherit;
}
So I add new fix function to resolve it, make anchors style under any antd components normal as expected, online example updated.

Thank you, it is working for me. Saving my life.

abduhere · 2024-07-04T13:32:05Z

While going through this thread and exploring different options to configure Tailwind CSS with AntD V5, I finally found the official solution on the AntD website.
Link to solution: https://ant.design/docs/react/compatible-style#tailwindcss-arrange-layer

This solution of AntD website worked best for me. Hope this helps other people too!

yunsii · 2024-07-04T13:44:38Z

Also I have updated my postcss plugin docs: https://github.com/yunsii/postcss-antd-fixes#features

muyoou · 2024-07-30T03:00:49Z

While going through this thread and exploring different options to configure Tailwind CSS with AntD V5, I finally found the official solution on the AntD website. Link to solution: https://ant.design/docs/react/compatible-style#tailwindcss-arrange-layer

This solution of AntD website worked best for me. Hope this helps other people too!

It is working perfectly for me, thank you!

anotheri · 2025-02-05T15:55:02Z

Does anybody have a luck to make it work with Tailwind CSS 4 (+ lightning css, ideally)?

liaoyinglong · 2025-02-23T13:12:29Z

@anotheri try replace @import "tailwindcss"; with following

@layer theme, base, components, utilities;

@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/preflight.css' layer(base);

// put @tailwind utilities in #app or other selectors
#app {
  @tailwind utilities;
}

then u can see it works

<Button className='hidden'>start</Button>

diqye · 2025-02-23T17:48:46Z

root.render(<ConfigProvider theme={theme}><StyleProvider hashPriority="high"><UI /></StyleProvider></ConfigProvider>);
works for me.

anotheri · 2025-02-25T15:00:51Z

@liaoyinglong yeah, i've also noticed last week that it seems to be working as expected (after a couple updates of Vite, postcss so most probably it was not directly related to antd), thanks for heads up anyways.

Refer to [the doc file](https://ant.design/docs/react/compatible-style#tailwindcss-arrange-layer) of Antd, the `tailwind.css` file content need some modifies. The related issue of antd for refrerence. ant-design/ant-design#38794 (comment)

revskill10 · 2025-03-18T16:39:14Z

Can you put a working stackblitz example @diqye @anotheri ?

MadCcc added the 🤔 Need Reproduce We cannot reproduce your problem label Nov 21, 2022

This comment was marked as outdated.

Sign in to view

MadCcc removed the 🤔 Need Reproduce We cannot reproduce your problem label Nov 21, 2022

MadCcc closed this as not planned Won't fix, can't repro, duplicate, stale Nov 22, 2022

li-jia-nan reopened this Nov 24, 2022

afc163 mentioned this issue Nov 27, 2022

Ant Button conflict with TailwindCSS #39036

Closed

MadCcc closed this as completed Nov 27, 2022

MadCcc mentioned this issue Dec 1, 2022

[Input.Group] White border present in dark mode #38954

Closed

zombieJ added the ❓FAQ issues would be discussed a lot label Dec 22, 2022

sedationh mentioned this issue Nov 4, 2023

Taiwind CSS 和 Antd 样式冲突 sedationh/iFrameHub#14

Closed

yoyo837 mentioned this issue Dec 30, 2023

How to increase specificity of atomic css classnames when passed to component? #46707

Closed

liaoyio mentioned this issue Jan 14, 2024

在 layout 中使用 config provider，并且页面中有 server component 用了 antd 就会报错 ant-design/nextjs-registry#1

Open

chenshuai2144 mentioned this issue Jan 15, 2024

🧐[问题] tailwindcss 跟 antd 样式问题冲突 ant-design/pro-components#8063

Closed

zhangyuheng mentioned this issue Mar 12, 2024

primary按钮样式会与tailwindcss样式冲突 #45560

Closed

C0deBeez mentioned this issue Jul 23, 2024

增加StyleProvider组件 CNFeffery/feffery-antd-components#190

Closed

zollero mentioned this issue Mar 15, 2025

Fix css confiliction within tailwind and antd umijs/umi#12961

Open

petercat-assistant bot mentioned this issue Mar 24, 2025

在layer模式下，ConfigProvider和@ant-design/icons结合会导致antd的layer层的优先级被降低 #53275

Open

New ant design version 5.0.0 is confilicting with tailwindcss #38794

New ant design version 5.0.0 is confilicting with tailwindcss #38794

Comments

rizwan92 commented Nov 21, 2022 • edited Loading

Reproduction link

Steps to reproduce

What is expected?

What is actually happening?

github-actions bot commented Nov 21, 2022

rizwan92 commented Nov 21, 2022

This comment was marked as outdated.

sherali-1 commented Nov 21, 2022 • edited Loading

MadCcc commented Nov 22, 2022

rizwan92 commented Nov 22, 2022 • edited Loading

Damienbelingheri commented Nov 24, 2022

li-jia-nan commented Nov 24, 2022

phatify commented Nov 27, 2022

phatify commented Nov 27, 2022 • edited Loading

phatify commented Nov 27, 2022 • edited by li-jia-nan Loading

MadCcc commented Nov 27, 2022 • edited Loading

zombieJ commented Nov 27, 2022

Vincz commented Dec 9, 2022

yf-hk commented Dec 11, 2022

chunsch commented Dec 11, 2022 • edited Loading

KhokharJunaid commented Dec 12, 2022

phatify commented Dec 19, 2022

phatify commented Dec 19, 2022 • edited Loading

gavinliu6 commented Dec 22, 2022

phatify commented Dec 22, 2022

zombieJ commented Dec 22, 2022

Time1sMoney commented Jul 27, 2023

yunsii commented Aug 19, 2023 • edited Loading

20230924 Update

zanniboni commented Sep 19, 2023

FeiPengDev commented Sep 20, 2023

yunsii commented Sep 24, 2023 • edited Loading

20230924 Update

EdwardMoMo commented Oct 5, 2023

20230924 Update

yunsii commented Oct 5, 2023

EdwardMoMo commented Oct 5, 2023

dananjaya6005 commented Dec 12, 2023

BarrySong97 commented Dec 19, 2023

kaustubhxd commented Jan 21, 2024

jagaa999 commented Jan 26, 2024

jagaa999 commented Jan 26, 2024

20230924 Update

abduhere commented Jul 4, 2024

yunsii commented Jul 4, 2024

muyoou commented Jul 30, 2024

anotheri commented Feb 5, 2025

liaoyinglong commented Feb 23, 2025

diqye commented Feb 23, 2025

anotheri commented Feb 25, 2025

revskill10 commented Mar 18, 2025

rizwan92 commented Nov 21, 2022 •

edited

Loading

sherali-1 commented Nov 21, 2022 •

edited

Loading

rizwan92 commented Nov 22, 2022 •

edited

Loading

phatify commented Nov 27, 2022 •

edited

Loading

phatify commented Nov 27, 2022 •

edited by li-jia-nan

Loading

MadCcc commented Nov 27, 2022 •

edited

Loading

chunsch commented Dec 11, 2022 •

edited

Loading

phatify commented Dec 19, 2022 •

edited

Loading

yunsii commented Aug 19, 2023 •

edited

Loading

yunsii commented Sep 24, 2023 •

edited

Loading