Why TailWindCSS rocks in responsive utility classes

If you want the text in a DIV or a paragraph element centered we use class='text-center' in Bootstrap 5.

<p class="text-center">Center aligned text on all viewport sizes.</p>

https://getbootstrap.com/docs/5.1/utilities/text/

But this will be centered on all devices - small screen mobiles, mobiles, tablets, laptops, desktop.

What if you wanted the text centered only on mobiles and not to be centered (so basically left-aligned as default) on tablets, laptops and desktop ?

We can do this :

<p class="text-center text-md-start">Center aligned text on mobile and left aligned on desktops.</p>

This is because Bootstrap has a class named text-md-start which will have the text aligned to the left (hence start) on medium sized screen (md) and above devices.

• Basically, you have the option to have the text left-aligned specifying for all possible screens - text-sm-start, text-md-start, text-lg-start, text-xl-start
• The same goes for text-center for which we have responsive classnames like text-sm-center, text-md-center, text-lg-center, text-xl-center
• And again for right-aligned - text-sm-end, text-md-end, text-lg-end, text-xl-end

So Bootstrap now has 12 class names for 3 kinds of alignment in 4 different types of screen resolutions.

[ Note : Prior to version 5 of Bootstrap, the names are -left and -right as opposed to -start and -end ]

Here is the thing - not all utility classes have separate names for responsiveness. For example if you want to bold a text in bootstrap:

<p class="fw-bold">Bold text.</p>

[ In Bootstrap 4 its font-weight-bold ]

But what do we do to have it bold on mobile and normal (not bold) on desktops ? There is no fw-md-normal or font-weight-md-normal to do something like this :

<p class="fw-bold fw-md-normal">Bold text on mobile and normal on medium sized screens and above</p>

If Bootstrap were to include 4 responsive class names for all their classes then the CSS file would be huge.

There is an alternate way - which is to include 2 sets of the same HTML content with class names for displaying or hiding the element itself on mobile and desktops.

<p class="fw-bold d-none d-sm-block d-md-none">Bold text on mobile</p>
<p class="fw-md-normal d-none d-md-block">Non bold text or normal text on medium sized screens and above</p>

This would result in larger HTML filesizes and prone to content errors.

This is where TailWindCSS rocks.

1. Only the classes used in your HTML source will be included in the final compiled CSS output.
2. Media queries classnames for responsiveness are attached with the screensize type followed by a colon (:) and then the utility class name.

<p class="text-center md:text-left">Center aligned text on mobile and left aligned on medium screens sizes and above.</p>

Similarly, font bold on mobile and normal / regular on medium screen sizes and above (desktops and laptops).

<p class="font-bold md:font-normal">Font bold on mobile and normal / regular on desktops and laptops.</p>

So now in TailWindCSS we have four times n classes without actually defining 4 times n classnames.

If you want to learn TailWindCSS checkout https://www.youtube.com/c/Thirus