如何在vue3和vite的项目中这样使用tailwindcss的dynamic class?
How to use dynamic class of tailwindcss like this in project of vue3 and vite?
<script>
export default {
name: "TestTailwind",
};
</script>
<script setup></script>
<template>
<div class="">
<div v-for="i in 20" :key="i" :class="[`m-${i}`]">m-{{ i }}</div>
<div v-for="i in 20" :key="i" :class="[`p-${i}`]">p-{{ i }}</div>
</div>
</template>
<style lang="scss" scoped>
</style>
我尝试使用动态 class ,但顺风不给我 class 权利。
预计:
这是因为 tailwind tree shaking。您需要将要动态生成的 类 添加到 tailwind.config
文件中的安全列表,因为 tailwind 无法检测使用此动态语法的 类。
代码如下:
module.exports = {
content: [
'./pages/**/*.{html,js}',
'./components/**/*.{html,js}',
],
safelist: [
'p-1',
'p-2',
'p-3',
// ...
],
// ...
}
您可以阅读文档 here
<script>
export default {
name: "TestTailwind",
};
</script>
<script setup></script>
<template>
<div class="">
<div v-for="i in 20" :key="i" :class="[`m-${i}`]">m-{{ i }}</div>
<div v-for="i in 20" :key="i" :class="[`p-${i}`]">p-{{ i }}</div>
</div>
</template>
<style lang="scss" scoped>
</style>
我尝试使用动态 class ,但顺风不给我 class 权利。
预计:
这是因为 tailwind tree shaking。您需要将要动态生成的 类 添加到 tailwind.config
文件中的安全列表,因为 tailwind 无法检测使用此动态语法的 类。
代码如下:
module.exports = {
content: [
'./pages/**/*.{html,js}',
'./components/**/*.{html,js}',
],
safelist: [
'p-1',
'p-2',
'p-3',
// ...
],
// ...
}
您可以阅读文档 here