As you know, Tailwind CSS is an utility based CSS Framework using which you can build modern websites without ever leaving your HTML
Tailwind CSS is like an API for your design system, it so powerful that you can build unique, modern and powerful design systems out of it. With Tailwind CSS, it can be easy to be consistent with color choices, spacing, typography, shadows, and everything else that makes up a well-engineered design system.
Selecting the right CSS framework is key to scaling your team's capabilities over time. With Tailwind, you can standardize CSS across all of your projects. By sticking to a consistent approach, it would be easier to code at a constant pace, grow your front-end team's know-how and achieve visual bug-free outcomes quickly and reliably.
Everything is fine, but it makes Ugly HTML
If you care about markup aesthetics it's simply, well, ugly. The markup at first can be overwhelming. For example look at the following code for simple call to action banner
<section class="text-grey-300 bg-gray-100 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="lg:w-2/3 flex flex-col sm:flex-row sm:items-center items-start mx-auto">
<h1 class="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900"> Ac euismod vel sit
maecenas id pellentesque eu sed consectetur. Malesuade adipiscing sagittis vel nulla nec. </h1>
<button class="flex-shrink-0 text-grey-300 bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg mt-10 sm:mt-0">Signup Now</button>
</div>
</div>
</section>
But, Why not Bootstrap?
Bootstrap is popular and easy to use, therefore everyone is using it. Though it offers many ways to be customized to make it your own, not everyone does that. The result will be a number of websites that look more alike than they should.
Another problem like growing of custom styles and mixins. Once you start modifying the design over a period of time you might have added bunch of utility classes on top and then added a lot of custom code on top for each project.
But, Why Tailwind CSS for your next web app?
Switching to Tailwind CSS is overwhelming at first, over a period of time it will be the easiest option, despite the complex markup, it's much easier and faster to debug styling issues when only Tailwind classes are used.
1) Tiny in Production
Tailwind automatically removes all unused CSS when building for production, which means your final CSS bundle is the smallest it could possibly be. Thanks to Tailwind CLI.
npx tailwindcss -o build.css --minify
2) Ease of creating unique abstract components
It is recommended to use Tailwind utility-first classes. This is a powerful way to avoid premature abstraction and the pain points that come with it.
If you working on React, Angular or Vue based project and if you stuck with repeating the same utilities over and over and over again then make it as component so that it will become a single source of truth & you can make changes in one place.
You can use the following library, made by Tailwind Labs - for React or Vue
3) Standardization & Efficiency
Once you adopt to Tailwind, you can implement your own custom design system without losing consistency which means you can commit your design & dev team together. It will improve your team efficiency because of standardized procedure. It will be more easier to experiment and move components across stacks. From Landing Pages, websites to app everything is gonna be ruled by same framework.
Before diving in, start experimenting with multiple prototypes using Tailwind CSS to get comfortable.
Hope you enjoy working with Tailwind CSS.
If you want to prototype or experiment with multiple CSS frameworks like Tailwind CSS, Bootstrap or Bulma, you can try our tool Gridbox.io