如何在不使用 !important 选项的情况下覆盖组件中的 TailwindCSS 实用程序类？

Question

例如，假设你有一个这样的组件（以 VueJS 为例）：

<!-- Container.vue -->
<template>
  <div class="px-5">
    <slot></slot>
  </div>
</template>

当你实际调用它时，你想用

px-5

类覆盖

px-10

，如下所示：

<template>
  <Container class="px-10">
<template>

上面的方法不起作用，因为 px-5 是先写的，已经设置了该属性......所以默认情况下 px-5 获胜。

我不想写

!px-10

，因为我从各种来源听说使用

!important

标签不是一个好的做法。

如何在不使用 !important 的情况下使上述示例正常工作？

Answer 1

从我自己的研究来看，tailwind-merge似乎是迄今为止最好的解决方案。

如何使用它（使用Vue 3）：

<template>
  <div :class="twMerge('px-5', $attrs.class')">
    <slot></slot>
  </div>
</template>

<script setup>
import { twMerge } from 'tailwind-merge'
</script>