react+umi tailwindcss 集成方案
- Tailwind是一个原子类方式命名的CSS工具集。
- Tailwind CSS 是一个功能类优先的 CSS 框架,它集成了诸如 flex pt-4, text-center 和 rotate-90 这样的的类,它们能直接在脚本标记语言中组合起来,构建出任何设计。
- 有效地减少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
}
}