tailwind css如何和antd5一起优雅的实现动态主题切换

前言

很长时间没有发文了，最近在完善前面做的 fluxy-admin 项目，前面很多地方实现的很粗糙，也没有使用文档，所以最近打算给完善一下，补一下开发文档，让使用的人更加方便。

这一篇文章记录一下，我在实现antd 和 tailwindcss 动态主题切换方案。

初始化项目

原项目内容有点多，这里创建一个新的 vite 项目来讲解如何 antd5 和 tailwindcss 实现动态切换主题。

创建vite项目

执行 npm create vite@latest 命令

npm create vite@latest

选择 react 模版

安装antd

pnpm i antd

测试一下

安装tailwind

执行命令

pnpm i -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

执行完上面命令之后，项目根目录下会出现 tailwind.config.js 文件，用下面内容给覆盖掉。

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

然后使用下面内容给 src 目录下 index.css 文件内容给覆盖掉

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

测试一下

刚使用 tailwindcss 的小伙伴可能记不住那么多样式，可以安装 Tailwind CSS IntelliSense vscode 插件，会有代码提示。

基于antd实现动态主题切换

这个官方有具体的文档，ant-design.antgroup.com/docs/react/…

修改主题色

动态切换主题色，使用ColorPicker组件修改颜色

这样就简单的实现了，antd 的动态主题切换。

tailwind动态主题切换

在 tailwind.config.js 文件中，定义一个主题色。

代码中使用这个颜色

装了上面那个插件后，还有代码提示

按照这个方案，没办法实现动态切换主题色，因为 tailwind.config.js 文件里定义的主题色，是在代码编译的时候确定下来的，后面就不能改了。

那怎么办呢？我们可以使用 css 变量方案来实现这个需求。

在 index.css 文件中加入 --color-primary 变量

然后在 tailwind.config.js 使用这个变量

修改 App.tsx 文件，当颜色更改时改变全局颜色变量

测试一下

更优雅的方案

因为antd里面支持很多主题变量，如果我们想要 tailwind 和 antd 里的变量保持一致，需要自己定义很多变量，然后动态修改这些变量，这样是很麻烦的。

还好 antd 支持切换成变量模式

没切成变量模式之前是固定值

切换之后

现在我们只需要把tailwind.config.js里面变量改成 --antd-color-primary 就行了。

额，好像不行，原来 antd 把 css 变量放在一个类名下面，并没有放在全局，所以我们无法使用。

我们可以改这个名字

然后给项目根目录下加上 app 这个类名就行了

暗黑模式

antd实现暗黑模式

antd本身就支持暗黑模式

tailwind 实现暗黑模式

修改 tailwind.config.js 文件

监听 dark 变化，给 body 元素动态添加 dark 类名

测试一下，暗黑模式下文字显示黑色， 字号变大 24px，正常模式跟随 antd 主题色

正常模式

暗黑模式

最后

最近在重构 fluxy-admin 框架前后端代码，还添加了开发文档，应该很快就会和大家见面了。