vuejs3 - 如何在vue3和vite的项目中使用这样的tailwindcss动态类？

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>

我尝试使用动态类，但顺风没有给我正确的类。

预期:

Answer 1

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

这是代码:

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

您可以阅读文档 here