新开了一个同时安装tailwind和antd的next.js项目,发现运行起来时部分组件会产生样式冲突,例如antd Button,在使用过程中按钮颜色默认为透明。
解决方法:在tailwind.config.ts
配置文件里把corePlugins.preflight
设置为 false,没有用Typescript的项目同理。
import type {Config} from "tailwindcss";
const config: Config = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
"gradient-conic":
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
},
},
},
// 增加下面的配置
corePlugins: {
preflight: false,
},
plugins: [],
};
export default config;