This is something I've been thinking about a bit lately (as a newer developer), and coincidentally today Web Dev Simplified posted basically a similar video up on YouTube. So, let's quickly go over it.

What is Bootstrap?

Most web devs, even newer ones will likely have at least heard of Bootstrap. Bootstrap is generally described as a CSS front-end framework (the actual code can include HTML, CSS, and Javascript), and in short is used to add fully functional and styled components directly in the HTML.

So, let's say you need a button. The normal way would be to create a button element in the HTML, then apply specific styles in the CSS, and add some functionality through Javascript. Instead of doing all of that you can just add a button with a type and certain Bootstrap classes and all of the styles and functionality will automatically be added.

What is Tailwind CSS?

Tailwind CSS also describes itself as a CSS Framework, but as a utility first framework. The main difference is that with Tailwind, the classes you apply to an element are much more limited.

Rather than instantiating a button that has styles and functionality built in like Bootstrap, you apply smaller classes such as width, height, margin, padding, etc.

Difference Between Tailwind and CSS?

Sometimes there isn't really any difference. Applying a class of 'flex' in Tailwind CSS does the same things as "display: flex" in regular CSS. But some classes will have clearer differences.

Say the 'w' class which corresponds to the 'width' property in CSS. In regular CSS you would do something like "width: 4rem" or "width: 50%". In Tailwind you would do something like "w-16" or "w-1/2" to get the same result.

So, is there any real difference? Ultimately yes, while Tailwind covers the vast majority of 'regular' CSS options, it won't give you every single option. And so the question becomes is this a good thing or a bad thing?

Tailwind or CSS?

Ultimately it will largely come down to the nature of the project you're working on and how much control you want over the styling.

If you're using a framework like React, then Tailwind can become very useful as you just apply style classes to the component and then those styles are applied whenever you use that component.

However, if you're making an app or site with just HTML/CSS/Javascript then it can become a bit of a pain to keep applying classes to each element over and over again.

If I want to be very exact with say, the exact shade of color I want, then I may opt to use CSS because Tailwind by default will apply specific shades to their color classes (IE 'text-gray-800' corresponds to 'color: rgba(254, 226, 226, 1)'.). Now you can change things in the Tailwind config file or in another file, but that's extra work and if you're going to tweak a lot of stuff is it worth using Tailwind?

But of course, more options is not always ideal. Often the common options that Tailwind already includes are perfectly sufficient and having less to pick from and more consistency can make it easier to add styles to a site. You don't have to worry about if you applied exactly the same margins on each page because you know everything is just 'mb-5' (mb = margin bottom).

What About Bootstrap?

When should you use Bootstrap? Personally I prefer not to use Bootstrap because it is difficult to change any of the components that Bootstrap gives you. An example of when I did opt to use Bootstrap is for a project that used carousels. Rather than create the necessary HTML and Javascript, it was just easier and made more sense to use the pre-made ones from Bootstrap.

In the aforementioned Web Dev Simplified video on the topic, he mentions using Bootstrap for basic prototyping styles so you can focus more on the content and functionality aspects. I suppose this is true, but personally I think it's better to pre-plan the design out in something like Figma, and then add the necessary styling as you go in the manner that you will go with (I'd rather not start out with one method, have to strip it out, and then add in the final method later).

My Personal Preference

Personally, I like using just regular CSS most of the time, but that's because it logically makes more sense to me and it just kinda works better with my workflow. However, after using Tailwind a few times nows, I can see its appeal. Everything is in one place so you don't need to switch back-and-forth between and it can be easy to just apply a bunch of classes and things just work.

However, if you're not familiar with all the classes and what they actually connect to in CSS then it can be a bit intimidating to get started with and you will need to do quite a bit of searching in the docs to see what you're actually looking for. And yes, it is necessary to know how CSS works to use Tailwind.

Bootstrap I only use if I need a more generic look for a site or if I want to include a specific Bootstrap component in the project.

Conclusion

Ultimately the choice will be down to a few factors. Your level of comfort with CSS in general, the project format, how much control you want, the overall look you want.

If you want more control, more unique styles, and are comfortable with CSS then probably stick with regular CSS.

If you want some control, clean/consistent appearance, and are okay with CSS overall, then give Tailwind a try.

If you just something simple, easy to implement, or are unfamiliar with some of the intermediate/advanced aspects of CSS, then use Bootstrap.