react+umi tailwindcss 集成方案

react+umi tailwindcss 集成方案

1. Tailwind是一个原子类方式命名的CSS工具集。
2. Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。
3. 有效地减少css冗余、样式复用以及为了给class命名而浪费精力。

umi中集成

安装

 pnpm install tailwindcss postcss-import postcss-nested autoprefixer

配置 修改umirc.ts配置文件

export default defineConfig({
  // ...
  extraPostCSSPlugins: [require("tailwindcss"), require("autoprefixer")],
  // ...
});

引入

/* 根目录下global.less引入 */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

FAQs

使用tailwindcss与antd冲突，Button按钮透明

问题出现的原因

原因是我们使用了tailwindcss ，默认情况会有tailwindcss的默认属性代码块内我们发现 background-color: transparent; 这个是默认属性导致的

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}
<style > button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

解决方案，禁止tailwindcss的默认属性

修改文件 tailwind.config.js 添加corePlugins对象，并设置preflight为false

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