首页逛逛项目
..

Antd与TailwindCSS集成的注意点

2025.03.289views

本文讨论的Ant Design为v5，弃用less，采用CSS-in-JS，底层使用@ant-design/cssinjs作为解决方案。
本文讨论的Tailwind CSS为v4。

前言

首先我们需要捋清Ant Design和Tailwind CSS两者概念。

  • Ant Design：UI库，提供了各种预先设计的组件。
  • Tailwind CSS：一个实用优先的 CSS 框架，提供用于构建自定义设计的低级实用类。

从本质上来讲，两者是没有冲突的，Tailwind CSS独立于任何预先设计的组件库。

使用

在global.css中，调整@layer来控制样式的覆盖顺序，让antd置于恰当位置：

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


@import 'tailwindcss';

这里我之前犯过一个错：

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


@import "tailwindcss";
@theme {
  ...
  --color-primary: #7832F1;
}

在<ConfigProvider />中：

<ConfigProvider
  theme={{
    token: {
      colorPrimary: "var(--color-primary)", // 这里是错误示范
      ...
    }
  }}
>
  {children}
</ConfigProvider>

这样导致了在页面中Ant Design的主题色并没有加载出来，所有相关的组件颜色都变成了#000000。

为什么这样，我的思考：
这里并非因为@layer优先级导致，而是因为antd的cssinjs方案。
image.png
如上图中（点此查看图片来源），Ant Design 的主题系统在内部处理时，需要对颜色值进行计算和转换，因为定义了主题色后，需要计算对应的hover，focus等颜色，因为这些颜色是基于主题色的。比如主题色为红色，那hover颜色不可能为红色，而是根据算法计算为浅红之类的，所以这可能是导致colorPrimary: "var(--color-primary)"无法生效的原因。

但是目前仅在theme.token中使用css变量是不行的，在theme.components中是可以的。
如果您有不同的看法，欢迎和我讨论。

使用<App>

当我们使用Modal.Confirm之类的静态方法时，因为需要可消费的React context的原因，需要我们提供消费上下文的默认环境：

import { App } from "antd";

然而，这导致了默认样式的重制，为原生元素带来了antd的规范样式，解决办法：

<App component={false}>
// 设置为 false，则不会创建额外的 DOM 节点，也不会提供默认样式。

您可能对额外的DOM节点有疑惑，请看下图：

image.png
这就是其所指的额外的DOM节点，当component={false}时，红色方框标记的dom元素则不存在。