With more and more programmers now searching for an alternative to Bootstrap, it's important to talk about why, and also to explore how Bootstrap became so widely used in the first place.

Let me paint a picture for you...

It's 2011 and smartphones have finally reached the larger market. Everyone has an iPhone4 (even your friend who was never interested in new tech before) and internet presence is central to the success of every new company. Developers need to sharpen their skills fast - because for the first time websites need to be viewed from much smaller screens and nobody really knows how to do it. This is where Bootstrap comes into existence.

Thanks to its large set of pre-defined rules, making a website that works on both Desktop and Mobile is no longer a humongous task. The creation of websites streamlined for multiple platforms is revolutionised and will never be the same again.

Fast-forward to 2018 and Bootstrap has dominated well over half of the CSS framework market. Now in 2019, web development has never been more streamlined. There are more talented developers and designers than ever before. CSS has been expanded to include Flexbox and CSS Grids which make Bootstrap's responsive design obsolete. And yet Bootstrap still boasts a ~50% market share.

As hard to believe as it is, despite the many superior alternatives available, people still prefer to use Bootstrap.

What's the problem with Bootstrap?

Many people are still set on using Bootstrap for most of their projects. Ask them why, and the answer will most likely be that they think Bootstrap is unbeatable in terms of responsive layout.

This is a fair priority, really. And sure, Bootstrap has some useful extra components that you might use from time to time. But from my experience, Bootstrap is mostly used by developers or designers that don't have as much time to keep up with new technology.

As I mentioned, I often hear (mostly from back-end developers) that there simply isn't a better solution to Bootstrap. You should see some of the surprised faces I get when I then explain how CSS grids work.

Don't get me wrong - these are competent people, and there's nothing inherently wrong with Bootstrap. But problems arise when people settle on a single framework and don't make time for learning new techniques. In any kind of profession, this attitude (whether it be intentional or not) can be a huge setback.

Web Development's and Web Design's main foundation is that of constantly exploring new frameworks and technologies. Once a developer slack off from staying informed of current developments, their personal innovation just stops happening.

Tailwind: the alternative!

Finally a light and customizable framework. Tailwind isn't the only alternative to Bootstrap of course, but it's definitely my favorite of the many available at the moment.

What is it good for?

Something I loved about Tailwind at first glace was the almost absolute independence from CSS. As confusing as that sounds, this is the main selling point. Let me show you an example.

Here's how you would style an element like this:

<button class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-600">
  Button
</button>

This might not make sense at first glance but let's break it down.

How does Tailwind work?

As you may have guessed from the example above, each class of the button element is associated with a specific style. bg-blue-500 sets the background color, text-white sets the text color to white, and so on.

All of these classes come predefined with Tailwind. There's a tailwind class for almost every single CSS rule out there. It takes some time to remember everything, but after only a day or two you'll be needing to check Tailwind's docs a lot less. And after a week, writing these classes will become second nature.

But Tailwind doesn't stop at just having predefined classes. As you would expect from any effective alternative to Bootstrap, it also has an elegant solution to responsive design.

Rather than requiring you to create dozens of media-queries, Tailwind has all of these already pre-built into the framework. Each class in the framework comes with responsive variants. Want to apply a padding of 1rem only when the screen is more than 768px wide? Just add a condition before the class as so: md:p-4.

And so, with Tailwind you're able to build extremely complex and responsive interfaces without even leaving your HTML.

Why is this so useful?

1. Compatibility with modern frameworks

If you've worked with React or any other modern framework, you might have noticed they don't play too well with separate style sheets. React itself prefers CSS-in-JS, and while it is useful in most cases, for simple styles this can end up complicating your code.

With Tailwind, this is a non-issue. You will be able to add most of the styles you need as classes, and for the ones that Tailwind doesn't include, you can just use your preferred method to add them to your code.

2. It's perfect for quick prototyping

Not long after I started using Tailwind, it became clear that it's ideal for quickly seeing how your design looks on a screen. Rather than switching between a template and a CSS file and then having to search the CSS for the right class, it's likely you'll be able to observe all the styles affecting multiple elements at a glance.

If something doesn't work, just delete that specific class. No messing around with adding classes for elements that don't need any.

3. Better readability

As Web Development evolves, having easily readable code can go a long way in improving your co-workers' experience. Tailwind offers a standard name for every style you need. No more needing to ask question after question. And no more of this, for example: element-one__container--active

Anyone with access to the docs and minimal knowledge will be able to see what styles affect which element. Work-flow is sped up and there is generally less confusion.

Conclusion

While Bootstrap has been invaluable to me in the past, Tailwind has improved my coding in almost every single aspect. I'm faster, clearer and I feel like I'm finally able to develop an application that's easy to scale, leaving more time for being creative with it too. Creating easy-to-navigate CSS was always a big problem for me, but luckily now I don't have to worry anymore.

Tailwind is my favorite alternative to Bootstrap and if any of this rings true for you, definitely give it a try. You can get started with Tailwind here.