What I love about Tailwind CSS

Let’s talk about: Tailwind CSS

When it comes to web development, there are so many CSS frameworks out there, including Bootstrap, Foundation, Tailwind CSS, and Materialize, etc. with so many frameworks, and figuring out which and when to use them can be challenging.

What is Tailwind CSS?

Tailwind CSS is entirely utility-first and provides users with low-level CSS classes that can be used to define components and designs independently. Instead of delivering pre-designed elements as Bootstrap does, Tailwind gives building blocks that provide flexibility & customization; due to that, it has gained popularity in recent years mainly because of its simplicity and ease of use.

Why I like Tailwind CSS

I love using Tailwind, and it’s made my development workflow so much better. Here are some benefits I’ve gained from using Tailwind over a traditional framework or custom CSS.

Customization

Tailwind was built from the ground up to be super customizable. You can customize all the elements from there, be it colors, spacing sizes, styling, themes, etc. It comes with a default configuration, but it’s straightforward to override the default configuration with a tailwind.config.jsfile in your project.

In the above example, I added new color called gunpowder and new max width and height values, and you can apply them within the HTML, e.g., bg-gunpowderto set the background color of an element, and you can say max-w-4 to restrict its width.

No Naming Things

With traditional CSS, organizing each class can be a tedious task. Which courses should be specific? Which classes should be more generic? How do you manage them all and make sure they cascade in the correct order? This is where Tailwind CSS steps in, and the library provides utility classes for you, so you don’t have to name anything.

Development Speed

Because you don’t need to name things, you don’t have to switch context as much, and you’re not fighting the framework to make customizations, prototyping and implementing custom designs is fast using Tailwind. Much faster than most other CSS frameworks and quicker than writing custom CSS.

Well Documented

Tailwind comes with excellent in-depth, well-written, and easy-to-navigate documentation. Internal links are provided throughout all the documentation pages to make it easy for a user to expand on a piece of information. Also, it allows for going back to a prerequisite page or chapter that is essential to understand the insights provided on the current page.

Tailwind CSS compared to other frameworks

Much like other frameworks, Tailwind CSS aims to ease creating a website. Websites can be built faster thanks to predefined classes and general CSS rules. Because the principle is always the same, experienced users can switch between frameworks more rapidly. While conventional solutions provide fixed components such as buttons or navigation bars, Tailwind CSS delivers the tools to create such components.

Pros & Cons

Pros:

• It promotes a consistent design style across a project.
• It allows you to create custom designs without writing custom CSS.
• It can help you to build a design system faster.
• It has a large and active community.
• It is well-documented and easy to learn.

Cons:

• If not configured properly, it can result in larger CSS files because it generates a lot of utility classes (However, JIT solves this).
• It may not be suitable for projects that require a lot of design work, as it does not have built-in components like other CSS frameworks (However, tailwindui solves this).
• Default styles may not suit your needs, and you have to override them.
• Requires a learning curve. Tailwind has a different approach to styling compared to traditional frameworks.
• Not great for beginners, as they might miss out on CSS fundamentals

Final Thoughts

Tailwind has become my preferred styling solution. It has solved most of the drawbacks I have encountered in my journey through different CSS solutions. It has increased my productivity, made me more consistent, and changed my development paradigm.

Overall, it is a powerful and flexible tool that can help developers create custom, responsive designs quickly and easily. If you’re looking for a CSS framework that allows you to focus on building great designs rather than writing complex stylesheets, Tailwind is definitely worth considering.

Ivan Todorov — Software Developer at Lexis Solutions