What's The Difference Between Tailwindcss and UI Framework (Bootstrap, etc.)

In this short discussion, we will briefly discuss what Tailwind CSS is and how it is different from the UI kit components framework that we often use, such as Bootstrap, Material UI, and so on. Tailwind is basically the same as a general CSS framework, but this library is built at a lower level than a UI kit framework. With this concept, Tailwind CSS is starting to be very popular among developers, especially front-end developers, because they can develop the appearance of their applications more flexibly according to their wishes.

In contrast to UI kits framework such as Bootstrap, Tailwind CSS does not provide instant components. For example, in Bootstrap to make a button, we only need the btn class and the class to determine the variant of the button we want, for example the primary button, we can use btn-primary, and the element will automatically become a beautiful button element, of course with Bootstrap style. Notice the example below.

The code above will display a display like the following.

Using Bootstrap, we can easily make a button look beautiful, just using a class.

Tailwind can also do the same as Bootstrap above. Because Tailwind is built with a low level concept, it is necessary to unite enough classes to make the button look like what Bootstrap did above. Using Tailwind, we need to assemble a class because in Tailwind there is no instant class that can instantly form a button component instantly. Look at the example in the line of code below.

The code above will display a display like the following.

If we pay attention, Tailwind requires a series of classes to form a button appearance which is quite similar to what Bootstrap does. From the two examples above, we will be able to understand more clearly about Tailwind and Bootstrap.

Which One Is Better

Based on our experience using the Tailwind and UI kit components framework, we can't definitively say which is the better of the two. Both of these libraries have their own advantages and disadvantages. In this case we will discuss Tailwind and Bootstrap which represent UI kits. Using Bootstrap, it is very easy for us to create a component instantly, and it will speed up the work on the front-end of our application, but this sacrifices flexibility. We can't be flexible in making UI components, to be more flexible, we need to do custom CSS outside of the Bootstrap class itself.

Using Tailwind, maybe we need to work more to make a certain component name, but this is precisely what front-end developers like a lot. Front-end developers love the concept of Tailwind because they can get creative with creating their own views. Meanwhile, Tailwind also provides a feature to extract existing classes to combine them into new classes. Take a look at the example below.

The code above will display a display like the following.

The first picture above is that we extracted the component from the Tailwind class by creating a new class. In the second picture we implement our new class as a result of the component extraction in the second button example. In this way, we can almost use Tailwind which is similar to Bootstrap, but more flexible and can be customized easily.

Conclusion and Tips

From our discussion above, at least we can distinguish between Tailwind and the CSS framework with the UI Kit concept. In its use, which one will we choose, depending on our needs. Based on experience in building application front-ends, it is highly recommended to combine the UI framework kit with Tailwind. The UI Kit framework is used to generate components so that we can create views quickly, and Tailwind as a component for customizing our UI components. For example we can use Bootstrap or Material UI (MUI) as a component generator, and Tailwind to do custom views.

Epilogue

Thank you for reading this article, I hope this article is useful for you, if you learn something new from this article, please provide feedback on this article, or give us criticism, suggestions so that it can be even better. Maybe you want to buy me a cup of coffee?