Why TailWindCSS rocks in responsive utility classes
3 min read
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>
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 -
- The same goes for
text-centerfor which we have responsive classnames like
- And again for right-aligned -
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
-right as opposed to
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
But what do we do to have it bold on mobile and normal (not bold) on desktops ? There is no
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