解决antd与tailwind样式冲突问题（Button透明）

解决antd与tailwind样式冲突问题（Button透明）

1、在tailwind.config.js文件中添加

corePlugins: {
   preflight: false
 }

tailwind.config.js变成

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      // gridTemplateColumns: {
      //   'responsive':repeat(autofill,minmax('300px',1fr))
      // }
    }
  }
  // plugins: [],
  // corePlugins: {
  //   preflight: false
  // }
}

2、修改tailwind样式@layer

在index..css文件中修改样式

@tailwind base;
@tailwind components;
@tailwind utilities;


/* @layer base { 
  button, [type='button'], [type='reset'], [type='submit']
  { background-color: #3b82f6; 
  }
} */

3、修改antd的全局样式

添加文件global.css并引入

按钮颜色改变

:global(.ant-btn-primary) {
  background-color: #1677ff !important;
}