How TailwindCSS makes you better at CSS

Most of us maintain CSS styles inside classes named ".card" or ".menu" that abstract away the CSS details. We are building on top of bootstrap, wordpress themes, or legacy CSS stylesheets that have hundreds of lines that are fragile if edited. We remain productive as long as we stick with the template. A major mental context switch is needed to modify or add new styles because the CSS rules have been hidden away.

TailwindCSS groups styles as utility classes, thin classes around minimal CSS features, rather than large pre-packaged controls. With Tailwind, you must specify, padding, margins, font-size, borders, etc.

Example: .font-bold

While this requires more typing, it is more transparent and easier to modify.

!important is not as important

CSS Specificity issues are also minimized as TailwindCSS encourages styling that is not too greedy or mysterious. There are no unexpected consequences in changing a class that does a single task.

Exception: the tailwind typography plugin (version) initially had some specificity issues in transforming markdown, but it has been fixed in recent versions.

Simple responsive variations

Bootstrap's responsive variations are excellent. Tailwind also includes classes that target responsive breakpoints like small (sm), medium (md), and large (lg). Both Bootstrap and Tailwind make responsive styling easier than CSS alone.

Easy Dark Mode

Adding dark mode variations is as simple as prefixing a class with the dark: psuedo class.

<p class="text-black dark:text-gray-200">
    Lorem ipsum.
</p>