Tailwind CSS 是一个 CSS 工具框架，内置了许多样式 class，通过向 HTML 添加 class 属性，即可应用内置的样式。

最近在开发 Antd Pro 时，想尝试使用 Tailwind CSS，便有了这篇文章。Tailwind CSS 提供了多种安装方式，基于 Antd Pro 使用了 Umi 构建，内置了 PostCSS，这里我们选择通过 PostCSS 安装。

安装 tailwindcss 和 postcss 插件

yarn add tailwindcss postcss-import

修改 Umi 配置

在 config/config.ts 中添加如下配置

{
  extraPostCSSPlugins: [
    // eslint-disable-next-line
    require('postcss-import'),
    // eslint-disable-next-line
    require('tailwindcss'),
  ],
}

引入 Tailwind CSS

在样式中引入 Tailwind CSS，Antd Pro 可以选择 global.less，这里我们只引入 utilities，不引入 base，避免覆盖了 Antd 的默认样式

@import 'tailwindcss/utilities.css';

创建 Tailwind CSS 配置

在项目根目录，创建 tailwind.config.js 配置，并写入如下内容

module.exports = {
  theme: {},
  variants: {},
  plugins: [],
}

使用

在项目中使用 Tailwind CSS

<div class="md:flex">
  <div class="md:flex-shrink-0">
    <img class="rounded-lg md:w-56" src="https://images.unsplash.com" alt="with">
  </div>
</div>

Last

最后，推荐一个项目：tailblocks，提供了多个使用 TailwindCSS 构建的模板，我们可以在自己的项目中使用这些模板，快速构建页面布局。