如何在vue3和vite的项目中这样使用tailwindcss的dynamic class？

Question

<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 权利。

预计：

Answer 1

这是因为 tailwind tree shaking。您需要将要动态生成的类添加到 tailwind.config 文件中的安全列表，因为 tailwind 无法检测使用此动态语法的类。

代码如下：

module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  safelist: [
    'p-1',
    'p-2',
    'p-3',
    // ...
  ],
  // ...
}

您可以阅读文档 here

如何在vue3和vite的项目中这样使用tailwindcss的dynamic class？

How to use dynamic class of tailwindcss like this in project of vue3 and vite?

vuejs3

tailwind-css

vite

tailwind-in-js