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

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>

I try to use dynamic class , but tailwind not give me the class right.

Expect:

Does this answer your question? [React and Tailwind CSS: dynamically generated classes are not being applied](https://stackoverflow.com/questions/71063619/react-and-tailwind-css-dynamically-generated-classes-are-not-being-applied) — Ihar Aliakseyenka, May 24 '22 at 06:29

score 2 · Accepted Answer · answered May 24 '22 at 04:22

It's because of tailwind tree shaking. You need to add the classes you want to generate dynamically to the safelist in your tailwind.config file because tailwind can't detect used classes with this dinamic syntax.

Here is the code:

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

You can read the docs here

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

1 Answers1