Sai Yerni Akhil Madabattula
Sai Yerni Akhil's Blog

Sai Yerni Akhil's Blog

Moving from Bootstrap to Tailwind.CSS

Moving from Bootstrap to Tailwind.CSS

I know a lot more people getting started with web development learn bootstrap as the very initial step to master because it helps in prototyping more rapidly without having to write/focus a lot on media queries or writing custom CSS (removes all the hassle) and concentrate on building applications. But now bootstrap has become common and people are moving towards other CSS frameworks like Tailwind.css, SemanticUI etc.

Tailwind.css likes to call itself a utility-first CSS framework. So what is a utility first CSS framework? Let us know that by an example, consider a social media application similar to Facebook, which contains something like a friends list, it might have a container (div) with a CSS class something like .friends-list we don't know what that class does unless we take a look at the CSS code, this is called semantic-first CSS. the .friends-list class might have the following CSS -

.friends-list {
    display: flex; flex-direction: column;
}

While talking about utility-first CSS, In tailwind we do something like this -

<div class="flex flex-col">
        ...
</div>

Bootstrap also implements such utility first classes, but that's very limited. For example, in bootstrap, we have .card we don't know what that does unless we inspect the HTML element.

One thing note is that tailwind.css doesn't provide components like bootstrap's form, accordion, card etc.

Now let's see how we can move from bootstrap to tailwind and going forward through this article we'll know about things starting from the setup to implement things in Tailwind that we can do in bootstrap.

The Setup

We can set up tailwind using a CDN similar bootstrap also but there will not be any benefits like removal of unused CSS. You can refer to this. To reap the benefits of tailwind, we must use it with any build tools like PostCSS.

initialize an npm project and install the dependencies -

npm init -y
npm install tailwindcss@latest postcss@latest autoprefixer@latest vite

Note: vite is a build tool just like webpack which we see in the create-react-app

Setup tailwind.config.js and postcss.config.js

npx tailwind init -p

Now in the package.json, add a script to start the server -

...
 "scripts": {
    "dev": "vite"
  },
...

Now in your base CSS file in the project, add these lines which import the base, component and utility layers from tailwind

@tailwind base;
@tailwind components;
@tailwind utilities;

Note: Do not forget to import this CSS file into your index.html file

You can get the boilerplate from here (just download this, do npm install and it's done!)

Now that the setup is done, we'll move into things we had most implemented in bootstrap and try to replicate them using tailwind.

Grid

The first of the things that have made bootstrap popular is it's easy to implement grid layout. Bootstrap divides the layout into 12 columns. If you look closely, bootstrap implements its grid using the flexbox but Tailwind uses the grid as it is.

<!-- using bootstrap -->
<div class="row">
    <div class="col-8">
         width of 8
    </div>
    <div class="col-4">
         width of 4 
    </div>
</div>

In tailwind, we can use up to 12 columns, but we can use even more than that by configuring the tailwind (more about customizing tailwind )

<!-- using tailwind -->
<div class="grid grid-cols-12">
    <div class="grid-span-8">
         width of 8
    </div>
    <div class="grid-span-4">
         width of 4 
    </div>
</div>

For gutters/grid-gap, we can use gap-{n} to the grid container.

Flexbox

In bootstrap, we use d-flex and flex in tailwind.

<!-- using bootstrap-->
<div class="d-flex flex-row justify-content-start">
     text with flex-direction as row and its content justified start 
</div>
<!-- using tailwind -->
<div class="flex flex-row justify-start">
     text with flex-direction as row and its content justified start 
</div>

As we see, getting started with tailwind is not so hard 😀

Spacing

Margin & Padding

Spacing is the most often thing we come across and have to deal with and similar to what we have seen with flexbox, spacing isn't different at all.

<!-- Tailwind -->
<div class="m-4 mx-4 my-4 mt-4 mb-4 ml-4 mr-4">
</div>

the m{direction}-{n} where direction is left (l), right (r), top (t), bottom (b), x-axis (x), y-axis (y) and n ranges from 0, 0.5 (0.125rem), 1, 1.5...4 (1rem)

and we can replace m with p for padding.

Sizing

Sizing in tailwind is not limited to percentages of the parent container like we see in bootstrap, we can have a width in rem and also in percentage of the parent container and a lot more and here are some examples -

<!-- Tailwind -->
<div class="w-1{-96}">
<!-- 1 - 0.5rem -->
</div>
<div class="w-5/12">
<!-- width = 41.666 -->
</div>

Responsive utility based CSS

When we use bootstrap, there is no way for us to avoid writing CSS at least for the responsive styles which we want to apply for a specific viewport. Personally, I think this is where tailwind.css excels.

In bootstrap, we can only control the responsiveness of grid layout for different viewports without any CSS. Let me show things we can do with tailwind -

<div class="sm:text-blue-500 md:text-green-500 lg:text-red-500">
</div>

This applies different text colours for different viewports. We also have access to other viewports xs, xl, 2xl.

So, this will be our basic intro to get started with your journey from bootstrap to tailwind.css .

Thanks a lot for reading this article. Please comment you view and suggestions, it would help me a lot in improving.

 
Share this