Reusable Tabs Using Tailwind CSS and Vue under Laravel Development

The codes and tutorial was originally taken from Jeffrey Way of Laracasts

Source: https://gist.github.com/JeffreyWay/f844ca4dd1887d566759849665068162

Video:

Practical Component Exercise #3: Tabs

But our team uses Tailwind CSS and we are using Vue.js with Laravel, so it was a little confusing to apply but this is not hard when you are already familiar how vue components works and how to wire them to make it work.

Let’s begin with structuring our folder, I use _partials for the components I want to reused so it would look like this.

...components/_partials/Tab.vue and ...components/_partials/Tabs.vue

Then the codes on each file will look like these

As you can see on the codes above, it is easy to understand. If it still confusing, I suggest you watch the video to be enlighten.

Enjoy!