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>
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 liketext-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.
- Only the classes used in your HTML source will be included in the final compiled CSS output.
- 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 youtube.com/c/Thirus