一招解决Tailwindcss4.x与其他库样式冲突问题

当项目中引入tailwindcss，并与其他UI库混用时，可能会出现样式冲突问题，因为tailwindcss重置了一些基础样式，例如：引入tailwindcss后，原生button按钮没有了默认的样式。

在老版本中解决这个问题，只需要删除掉@tailwind base这项即可，或者在tailwind.config.ts配置文件中设置preflight: false即可。

tailwind.config.ts

export default defineConfig({content: ["./src/**/*.{js,ts,jsx,tsx}",],theme: {extend: {},},corePlugins: {preflight: false,},
})

 在新版本(4.x)中解决样式冲突问题也很简单，只需要将UI库的样式引入位置放到@layer base中即可，这相当于老版本中覆盖掉@tailwind base样式。例如：我在项目中使用了vant库，按如下方式引入vant样式文件可避免样式冲突问题：