# 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](https://tailwindcss.com/) 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