Tailwind CSS vs Bootstrap

Tailwind and Bootstrap are both hugely popular ways to avoid writing CSS from scratch, but they solve that problem in opposite directions. Bootstrap gives you finished components with an opinionated look. Tailwind gives you low-level building blocks and expects you to assemble the look yourself.

Utility-first vs. component-first

Bootstrap ships pre-styled components — buttons, navbars, cards, modals — that already look like something the moment you add the class:

<!-- Bootstrap: a finished, styled component -->
<button class="btn btn-primary">Save changes</button>

Tailwind ships single-purpose utility classes with no visual opinion of their own — you combine them to build the component yourself:

<!-- Tailwind: you compose the same result from utilities -->
<button class="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
  Save changes
</button>

Visual identity and customization

Bootstrap's out-of-the-box look is instantly recognizable — which is exactly why sites that don't customize it can end up looking generic. Its Sass variables and theming system let you override that, but you're customizing an already-opinionated system. Tailwind has no default visual identity at all — every project looks different by construction, because you're deciding the actual values (spacing scale, colors, radii) through its config, not overriding someone else's defaults.

JavaScript behavior and bundle size

Bootstrap includes JavaScript for interactive components — dropdowns, modals, carousels, tooltips — bundled in, so they work without reaching for another library. Tailwind is CSS-only; interactive behavior is entirely your own code or a separate headless UI library (Headless UI, Radix). On bundle size, Tailwind's build step scans your markup and strips every utility class you didn't actually use, so shipped CSS stays small even though the framework defines thousands of classes; Bootstrap's CSS is also reasonably small, but includes styles for every component whether you use it or not, unless you hand-pick which parts to import.

Which should you learn first

Learn Bootstrap first if you want to ship a decent-looking UI fast without making many design decisions — it's still a strong choice for prototypes, internal tools, and teams without a dedicated designer. Learn Tailwind if you're building a product with its own visual identity, especially alongside a component framework like React or Vue, where utility classes composed directly in your markup keep styles colocated with the component that uses them — this is now the more common default in modern frontend stacks.

See What is Bootstrap? for how Bootstrap's grid and component system work.