tailwind & vue stepper

steps.md

Usage

<steps :steps="3" :step="step"></steps>

<div v-if="step == 1"></div>
<div v-if="step == 2"></div>
<div v-if="step == 3"></div>

<script>
export default {
  data() {
    return {
      step: 1
    };
  },
  methods: {
    doSomething() {
      this.step = 2;
    }
  }
};
</script>

Steps.vue

<template>
  <div class>
    <div class="bg-grey-light h-1"></div>
    <div class="flex">
      <div class="flex-1" v-for="s in steps" :key="s">
        <div
          v-if="step >= s"
          class="bg-blue -mt-1 h-1"
          :class="{ 'w-1/2': step == s, 'w-full': step < s }"
        ></div>
        <div
          class="-mt-3 mx-auto rounded-full h-5 w-5"
          :class="{ 'bg-blue': s <= step, 'bg-grey-light': step != s }"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["steps", "step"]
};
</script>