强制TailwindCSS挑选类来挑选某些类

Question

我目前在我的Vue(与Vite)项目中使用TailwindCSS，我想使用一个动态宽度类，具体取决于某个数组的大小。

const array = [1, 2, 3];
const width = computed(() => `w-1/${array.length}`);

<div :class="width">Content</div>

我面临的问题是，当我使用由计算值生成的动态宽度(例如w-1/4)时，它不起作用。我能够得到这个工作的唯一方法是在我的组件的某个地方添加一个元素，其中包含我可能使用的所有可能的类，但这并不完全正确。

<div class="w-1/1 w-1/2 w-1/3 w-1/4 w-1/5 w-1/6">Content</div>

我已经在网上搜索并浏览了文档，但无法找到其他人有我的问题。我想知道是否有可能以某种方式配置TailwindCSS，以便在樱桃采摘过程中始终包含宽度类(w-1/1, w-1/2, w-1/3, w-1/4等)。

谢谢!

Answer 1

是的，这是可能的，通过所谓的"列表类"。这里记录了:https://tailwindcss.com/docs/content-configuration#safelisting-classes

所以你可以像这样添加类到你的配置:

safelist: [
'w-1/2',
'w-1/3',
'w-1/4',
...
]

注意w-1/1默认不存在。如果需要，您可以将其添加到配置中，但否则w-1/1将被忽略，如果它是块元素，它应该默认为100%。

module.exports = {
theme: {
extend: {
width: {
'1/1': '100%'
}
},
},
}