0

I have problem when insert value to class HTML. Usually, I implemented class with tailwind and now it didn't work. Here's the code:

HomeView.vue

<template>
  <div class="home">
    <Button color="yellow-500" round="lg">Hello World</Button> <--Im inserting props here-->
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Button from '@/components/Widgets/Button.vue'

export default defineComponent({
  name: 'HomeView',
  components: {
    Button
  },
});
</script>

Button.vue

<template>
  <button :class="theme" class="px-5 py-5" @click="run()">
    <slot></slot>
  </button>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'

export default defineComponent({
  props: {
    color: { required: true, type: String },
    round: { required: true, type: String },
  },
  data() {
    return {
      theme: this.setTheme,
    }
  },
  setup(props) {
    const setTheme = computed(() => {
      // Set for rounded button
      const rounded = `rounded-${props.round}`

      // Set for color and depth button
      const attribute= props.color.split('-')
      const color = attribute[0]
      const depth = Number(attribute[1])
      const hover = depth + 100

      return `${rounded} bg-${color}-${depth} hover:bg-${color}-${String(hover)}`
    })
    return { setTheme }
  },
  methods: {
    run() {
      console.log('clicked')
    }
  },
  mounted() {
    console.log(this.theme)
  }
})
</script>

I try using with static class and it's working. When I inspect the code after running it. The class are the same like I'm inserting with dynamic code. I wonder why?

Mohamad Abyannaufal
  • 15
  • 5
  • 1
    Does this answer your question? [Dynamically build classnames in TailwindCss](https://stackoverflow.com/questions/69687530/dynamically-build-classnames-in-tailwindcss) – Ricardo Silva Apr 17 '23 at 06:53
  • tailwind does not really support dynamic classes, you can do some workaround to make it work, not really recommend though, what you probably want is something like styled components. – Ricardo Silva Apr 17 '23 at 06:54

0 Answers0