Previously on RTB’s 3rd version of the platform we used Vuetify which is very good, don’t get me wrong but when building the 4th version, we decided to go a different route with TailwindCSS.
Vuetify and TailwindCSS are both front end frameworks we use on NuxtJS project. You can read more here why we started using NuxtJS.
Material Component Framework for VueJS 2. Vuetify is a component framework for Vue.js 2. It aims to provide clean, semantic and reusable components that make building your application a breeze. Vuetify utilizes Google's Material Design design pattern, taking cues from other popular frameworks such as Materialize.css, Material Design Lite, Semantic UI and Bootstrap 4.
A utility-first CSS framework for rapid UI development. Tailwind is different from frameworks like Bootstrap, Foundation, or Bulma in that it's not a UI kit. It doesn't have a default theme, and there are no build-in UI components. It comes with a menu of predesigned widgets to build your site with, but doesn't impose design decisions that are difficult to undo.
In my words. I’ll say Vuetify follows Google's Materials Design designs format while Tailwind CSS can be customized to whatever you desire. With Tailwind CSS, we could build the simple minimalistic design structure that Startups are going for today.
We switched because of the following reasons:
Speed: Our build times reduced significantly after the switch. Tailwind CSS builds were so much faster because the package has a lot less add-ons.
Website Design: This is subjective but because of what we were going for, we were able to use Tailwind CSS to give our website the simple minimalistic feel.
The biggest disadvantage of the switch is that we now have to create our components from scratch e.g. dialogs which we could previously just use out of the box from Vuetify. One thing that helped with this was Tailwind Components but keep in mind not everything is free there.
In conclusion, when building your website, you can use any of the two options as long as you understand what you’re signing up for. Vuetify is a mature framework based on Google’s material design which comes with great plug-and-play components while Tailwind CSS IS A utility-first CSS framework which gives you just the right amount of help, but the rest is up to you to build and design.
With all the points mentioned above I still think Vuetify is still a very good front end framework and just depends on the developer’s preference.