Introduction
Tailwind CSS is a utility-first CSS framework that streamlines web development by providing a comprehensive set of pre-built utility classes. Unlike traditional CSS frameworks, Tailwind doesn’t come with pre-designed components or styles. Instead, it focuses on small, single-purpose utility classes that can be composed together to build custom designs rapidly.
In this post, I’m going to be sharing with you my thoughts on Tailwind CSS after using it for the first time.
Why I chose Tailwind CSS
The two big players in the world of CSS frameworks are Tailwind CSS and Bootstrap. I didn’t bother thinking about other CSS frameworks because they weren’t as popular as these two, and a technology being popular is a good sign for adopting it.
So the choice was between Bootstrap and Tailwind CSS, and after doing my research, there is one main reason I decided to go with Tailwind CSS, and that is flexibility.
Unlike Bootstrap, Tailwind CSS offers more flexibility to developers by providing them with utility classes that they can use to build whatever UI component they want.
For instance, creating a button in Bootstrap would look like this:
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<button class="btn btn-success">Success Button</button>
<button class="btn btn-danger">Danger Button</button>
<button class="btn btn-warning">Warning Button</button>
<button class="btn btn-info">Info Button</button>
<button class="btn btn-light">Light Button</button>
<button class="btn btn-dark">Dark Button</button>
<button class="btn btn-link">Link Button</button>
And this is what the outcome would be:
Creating a button different from any of the buttons Bootstrap provides, would require writing custom CSS.
Meanwhile, in Tailwind CSS, creating those Bootstrap buttons would look like this:
<button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded">
Primary Button
</button>
<button class="bg-gray-500 hover:bg-gray-600 text-white py-2 px-4 rounded">
Secondary Button
</button>
<button class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded">
Success Button
</button>
<button class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded">
Danger Button
</button>
<button class="bg-yellow-500 hover:bg-yellow-600 text-gray-800 py-2 px-4 rounded">
Warning Button
</button>
<button class="bg-teal-500 hover:bg-teal-600 text-white py-2 px-4 rounded">
Info Button
</button>
<button class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-4 rounded">
Light Button
</button>
<button class="bg-gray-800 hover:bg-gray-900 text-white py-2 px-4 rounded">
Dark Button
</button>
<button class="text-blue-500 hover:underline">
Link Button
</button>
You can see that Tailwind CSS provides more utility classes to help you build a UI element. You can think of these utility classes as building blocks for building any UI element you want. While Bootstrap gives you a class (or classes) for a prebuilt button, Tailwind CSS gives you all the classes you need to build a button from scratch.
Although Tailwind CSS requires more CSS knowledge, the fact that it gives me more flexibility is empowering, enabling me to precisely control the styling of HTML elements without being limited by predefined component styles.
Initial Challenges Encountered
Every technology to be learnt has its learning curve. Due to this learning curve, there are certain challenges that must be overcome.
Using Tailwind CSS for the first time, these were the challenges I encountered.
Tailwind CSS Setup
Ignoring the fact that I could make use of the Play CDN for development, I instead made use of the Tailwind CLI, which was a little tricky to setup.
However, I’ve learnt my lesson, and I only use the Tailwind Play CDN for development.
While the setup may not be very difficult, compared to Bootstrap, it takes more time. Bootstrap provides a CDN that can be used for both development and in production.
Long Utility Classes
Sometimes the utility classes in Tailwind becomes so much that it leads to excessive horizontal scrolling whenever I need to modify or add new utility classes. However, I believe it is something I would quickly get used to with time.
What I Liked
One thing I liked about Tailwind is the fact that it also removes all of the default styling that comes with certain HTML elements, such as buttons, links, and headings. Initially, when I added an h1 tag to my HTML file, it didn’t have the styles it was supposed to, and I felt like something was wrong until I went online and discovered that’s the way it’s supposed to behave.
It’s a good thing they removed these styles because sometimes some developers use certain HTML elements solely due to their default styles rather than their intended purposes. A common example is the misuse of the <h1> to <h6> heading elements purely for styling purposes instead of structuring content hierarchically.
VSCode Extensions I use with Tailwind CSS
- Tailwind CSS Intellisense: I’m only human, and as human, there is only so much I can remember. For this reason, I make use of this extension. This extension enhances the development experience by helping you quickly discover and apply Tailwind CSS utility classes as you type, so you don’t need to constantly consult the documentation separately.
- Headwind: This helps you automatically sort and organize Tailwind CSS classes within your HTML templates to ensure consistent ordering and improve code readability.
- Inline Fold: The utility classes can sometimes become really long. With the help of the Inline Fold extension, you can hide the utility class once you’re done applying them. This can help reduce the visual clutter in your VSCode.
Conclusion
Tailwind CSS is an amazing tool. Choosing it over Bootstrap doesn’t necessarily mean it is better than Bootstrap. Tailwind has its own way of doing things, which differs from Bootstrap’s approach. This uniqueness makes them both viable options to consider based on specific project requirements. There are times when Tailwind would be the best tool for the job, while other times, Bootstrap would be more suitable. I like to think of these frameworks as tools in my toolbox. Currently, I have chosen Tailwind CSS, but if there is any need to use Bootstrap in the future, I wouldn’t hesitate to learn it too.