Vue application styled with TailwindCSS ignores a grid with 4 columns but works with 3 columns

user_16740870 0
Viewed 407

I am using a grid in a component. I pass the number of columns to the component through props. I use this component twice in the same page. In one component I use 3 columns and in the other I use 4. With 3 columns it works as it should, with 4 it ignores the number of columns and displays my 4 columns in one.

<template>
 <div>

  <Component columns="3">
   <Column1>
   <Column2>
   <Column3>
  </Component>

  <Component columns="4">
   <Column1>
   <Column2>
   <Column3>
   <Column4>
  </Component>

 </div>
</template>

This is the component

<template>
  <div class="bg-grey-light" :class="classes">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "Component",
  props: {
    columns: {
      type: String,
    },
  },
  computed: {
    classes() {
      return "grid grid-cols-" + this.columns;
    },
  },
};
</script>

This is quite a strange behaviour. What's wrong ?? How can I have 4 columns in the second component ?

vuejs2 tailwind-css vue.js
1 Answers

The tailwind classes should be mentioned in your source code explicitly, the compiler will not know about the dynamic classes, so you should declare them statically as shown in the following example :

<template>
  <div class="bg-gray-400 grid" :class="classes">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "Component",
  props: {
    columns: {
      type: String,
    },
  },
  data() {
    return {
      cols: {
        3: "grid-cols-3",
        4: "grid-cols-4",
      },
    };
  },
  computed: {
    classes() {
      return this.cols[this.columns];
    },
  },
};
</script>
user_81728570
Related