解决和组件库一起使用时工具类不生效的问题

<a-button class="text-xs" @click="counter.decrement">
  Decrement
</a-button>

原先

/* tailwind.css */
@import 'tailwindcss';

Preview

工具类 text-xs 未生效。

解决

将 utilities.css 作为非级联层样式导入。

/* tailwind.css */
@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css";

Preview

工具类 text-xs 生效。@import "tailwindcss/utilities.css"; 是非级联层样式，优先级比级联层高。

参考

Tailwind classes not overriding regular CSS classes