I'm going to set up a new project and would like to have these two packages together, but not sure, so the question is that using Tailwindcss with antdesign Is a good practice?

我要建立一个新的项目，并希望将这两个包放在一起，但不确定，所以问题是，将Tailwincss与antDesign结合使用是一个好做法吗？

Does anyone have any experiences?

有谁有经验吗？

Each package has its own theme manager for instance for colors, typography, dark mode and so on. How do you manage theme, with tailwinds or antd or both? And why?

每个包都有自己的主题管理器，例如颜色、排版、深色模式等。你如何管理主题，顺风或逆风，或两者兼而有之？为什么？

Both packages have Grid support, which one would you prefer?

这两个程序包都支持网格，您更喜欢哪一个？

Let's have your insights?

让我们来听听你的见解？

After some research, I found these results

在一些研究之后，我发现了这些结果

Some examples that uses both libs:

使用这两个库的一些示例：

https://github.com/plamworapot/next-antd-tailwindcss

Https://github.com/plamworapot/next-antd-tailwindcss

https://github.com/dospolov/react-redux-saga-antd-tailwind-boilerplate

https://github.com/dospolov/react-redux-saga-antd-tailwind-boilerplate

https://github.com/cunhamuril/pocs

Https://github.com/cunhamuril/pocs

It recommended trying to commit to only one framework

它建议尝试只致力于一个框架

Tailwind is pretty much a design system using utility classes to make writing css easier therefore it can be pretty much used with any other ui library just make sure to disable the default styling that Tailwind inject into your default styling by disabling the preflight option in config :

Tailwind是一个使用实用程序类的设计系统，使编写css更容易，因此它可以与任何其他ui库一起使用，只要确保禁用默认样式，Tailwind注入到您的默认样式中，通过禁用配置中的preflight选项：

module.exports = {
  corePlugins: {
    preflight: false,
  }
}

One slight issue with using both ant-design and tailwind-css is tailwind's some of default styles will break ant-design components...

同时使用蚂蚁设计和顺风的一个小问题是，顺风的一些默认样式会破坏蚂蚁设计组件……

I recently came a cross an issue where ant-design image preview was not functioning correctly and the image was not centered.

我最近遇到了一个问题，蚂蚁设计的图像预览不能正常工作，图像没有居中。

expected result
image one

预期结果图像一

vs what I got when using tailwind with ant-design
image two

与我使用顺风和蚂蚁设计图像2时得到的对比

turns out tailwind will change default image display property from "inline-block" to "block" and breaks tailwind image preview component

原来，顺风会将默认的图像显示属性从“内联块”更改为“块”，并破坏顺风图像预览组件

I resolved my issue by reseting display property on images

我通过重置图像的显示属性解决了我的问题

img {
    display: unset !important;
}

apart from this little tweaks you will be good to go using both of them

除了这个小的调整，你会很好地使用这两个

There's no problem to use Tailwind CSS and Ant Design together.

同时使用TailWind CSS和Ant Design是没有问题的。

Tailwind CSS could be used to custom styling on Ant Design components.

顺风CSS可以用来定制Ant Design组件上的样式。

Check this link to see an example with Next, Ant Design and Tailwind CSS:

点击此链接，查看Next、Ant Design和TailWind CSS的示例：

https://github.com/plamworapot/next-antd-tailwindcss

Https://github.com/plamworapot/next-antd-tailwindcss

You can use Bootstrap with ant design right? Think Tailwind same as Bootstrap. Tailwind is a CSS library you can use it with any setup and framework there no extra configurations needed. Just pass the Tailwind class names.

您可以在蚂蚁设计中使用Bootstrap，对吗？认为尾风和Bootstrap是一样的。顺风是一个css库，你可以在任何设置和框架中使用它，不需要额外的配置。只需传递TailWind类名。

When it comes to theming. It's a context. Ant design will grab it's context and tailwind grab it's. We don't need to think or worry about it

当谈到主题时。这是一个背景。蚂蚁设计会抓住它的背景，顺风抓住它。我们不需要考虑或担心它

Well for me I needed to use tailwind to override the default ant design css styling so what I ended up doing was adding important:true to the tailwind config object (as per tailwind docs tailwind config docs for important config)

对我来说，我需要使用顺风来覆盖默认的Ant设计CSS样式，所以我最后做的是添加了重要的内容：对顺风配置对象的真(根据顺风文档，顺风配置文档中的重要配置)

module.exports = {
 ....,
 important:true,
};

I know some people frown at using important (as do I) but I think this is one of the uses it was created for.

我知道有些人不喜欢使用重要(我也是)，但我认为这是创建它的目的之一。

Use https://www.npmjs.com/package/antd-css-utilities

使用https://www.npmjs.com/package/antd-css-utilities

It was created to solve this specific problem. It includes most of the utility CSS inspired by Tailwind and Bootstrap. It also supports Intellisense

它是为了解决这个特定的问题而创建的。它包含了大部分受TailWind和Bootstrap启发的实用工具css。它还支持智能感知