Back
Featured image of post 在 UMI 中使用 TailwindCSS

在 UMI 中使用 TailwindCSS

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 构建的模板,我们可以在自己的项目中使用这些模板,快速构建页面布局。

Licensed under CC BY-NC-SA 4.0