[Nuxt3][Vue3][TailwindCSS] TailwindCSS don't effect when passing props

Question

<script setup lang="ts">
const props = defineProps({
  px: {
    type: String,
    required: false,
  },
  bg: {
    type: String,
    default: 'transparent',
  },
  rounded: {
    type: String,
    default: 'none',
  }
})

const classes = []
for (const [key, value] of Object.entries(props)) {
  (value !== undefined) && classes.push(`${key}-${value}`)
}

</script>

<template>
  <div :class="classes" class="overflow-hidden">
    <slot></slot>
  </div>
</template>

Because the props is reactive, so I think the DOM will finish rendering before script's process. How can I let the component wait for script's process? Thanks.

the classed has been added but it's reactive so they don't effect...

Thank you all so much. it worked with this codes! Yes now I certainly understood and how huge the utilities contain in. What I wanted to do is... — mmmchese
– mmmchese, Commented Oct 29, 2022 at 3:57
I'm working on making the document for my own CSS design concept, and components which enable to give hints of essential CSS classes for its component and learners to test and simulate the concept. but I will reconsider the construction. — mmmchese
– mmmchese, Commented Oct 29, 2022 at 4:00

kissu · Accepted Answer · 2022-10-28 08:14:33Z

Don't construct class names dynamically

If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS

How to use dynamic class names in tailwindcss -> use dynamic class name in tailwindcss

<!-- wrong ❌ -->
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

<!-- correct ✅ -->
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps({
  pxClass: {
    type: String,
    required: false,
    default: 'px-4'
  },
  bgClass: {
    type: String,
    default: 'bg-transparent',
  },
  roundedClass: {
    type: String,
    default: 'rouned-none',
  }
});

const classes = computed(() => {
    let result = [];
    for (const [key, value] of Object.entries(props)) {
        result.push(value)
    }
    return result;
})

</script>

<template>
  <div :class="classes" class="overflow-hidden">
    <slot></slot>
  </div>
</template>

kissu · Accepted Answer · 2022-10-28 08:20:45Z

1

This answer do have a really valid point of warning about dynamic classes. If you don't do that, you'll get your whole CSS payload bloated because Tailwind will not be able to generate only the needed utility classes.
Defeating the whole purpose of Tailwind. You can't have dynamic classes + utility classes at the same time mainly.

Here is an approach on how to do dynamic stuff in Vue with Tailwind's classes if you prefer to have an Options API approach on how to solve things.
As of today, this mapping is still the official way to go (confirmed by founders on Github discussions).

answered Oct 28, 2022 at 8:20

kissu

47.3k16 gold badges94 silver badges196 bronze badges

Collectives™ on Stack Overflow

[Nuxt3][Vue3][TailwindCSS] TailwindCSS don't effect when passing props

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related