使用@layer让组件库与tailwind兼容

参考一下antd的方案
tailwind3

@layer tailwind-base, antd; 
@layer tailwind-base { 
    @tailwind base; 
} 
@tailwind components; 
@tailwind utilities;

tailwind4

@layer theme, base, antd, components, utilities; 
@import 'tailwindcss';

用layer控制css优先级,确保tailwind的预设被组件库覆盖,组件库的样式又被开发者的样式覆盖
组件中写的tailwind类被放在utilities这个层级 所以它必须覆盖组件库
其他样式 则是打包的时候自动位于组件库后面 不需要额外设置
因此在index.css中这样写就可以

@layer theme, base, cui, components, utilities;

@import 'tailwindcss';

@layer cui {
  @import 'cui-solid/dist/styles/cui.css';
}

虽然MDN中 layer是实验特性 但是浏览器支持还可以 只需要chrome99+就可以了