Why is Tailwind CSS so trending nowadays?

In recent times, various CSS frameworks have been released and it really helped in making designing very easy to use for the developers.

Today, we can not visualize coding without our favorite CSS framework. Bootstrap has held its reign as the top CSS framework for quite some time, but now the Tailwind CSS has started acquiring the market.

While choosing the Tailwind CSS framework, developers must have many questions following as:

1. Is the Tailwind CSS framework more suitable for your requirements or not?
2. How do you know if the Tailwind CSS framework is convenient?
3. Also, if you’re new to front-end development, is Tailwind CSS framework should help you pick?

Well, if you think any other CSS frameworks are as good as Tailwind CSS, then read the blog and it might change your view towards any other CSS frameworks altogether (probably not in the way you may be thinking, instead you will start falling for Tailwind CSS).

Installation of Tailwind CSS

You can add Tailwind with CDN:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" integrity="sha512-+WF6UMXHki/uCy0vATJzyA9EmAcohIQuwpNz0qEO+5UeE5ibPejMRdFuARSrl1trs3skqie0rY/gNiolfaef5w==" crossorigin="anonymous" />

Installing Tailwind CSS through NPM:

npm install tailwind css

or

yarn add tailwind css

Then you need to import the tailwind directives into your css as below:


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

For more information on installation, you can refer to the Tailwind CSS installation documentation.

Development with Tailwind CSS

It sounds weird that you can use a CSS library to no longer write CSS, and that is because any styles you'll ever need to write can be created using the Tailwind CSS utility classes.

Tailwind CSS is the first utility framework and this means that you can remove, add, edit classes in tailwind.config.js. Also, its large set of utility classes can add padding, margin, width, height, and other CSS properties to an HTML element. Here is a quick example of creating a small black square utilizing Tailwind.

<div class="w-10 h-10 bg-black"></div>

These utility classes will help you frame your websites more attractive and beautiful. Also, there is one more great thing about these utility classes and that is that you will never have to create a new class name ever again. Yes, you heard it right. You will stop using traditional CSS and can totally rely on Tailwind CSS only.

Although if you are still hesitant about using the Tailwind CSS, then think of it in such a way that, when you will look back to Bootstrap, earlier you were creating custom CSS on top of bootstrap classes which was making the websites very heavy. Thus, after acquiring Tailwind CSS, your productivity will definitely increase and you will start making beautiful websites rapidly than ever before.

Performance of Tailwind CSS

Tailwind CSS files size is only 27kb. If you don’t need a larger set of components and functionality like bootstrap have (as bootstrap does have a file size of 308.25kb that include JQuery, Popper.js, Bootstrap JS, and the main CSS file), then Tailwind CSS is a better choice for lightweight projects.

Tailwind CSS comes prepackaged with a lot of options and styles for developers to choose from. Also, it packs all these variations which provide you in writing your own CSS less. Although, Tailwind CSS comes with a few strategies you can use to keep your generated CSS small and performance-wise up to the mark.

Responsiveness with Tailwind CSS

Considering the mobile-first world, Tailwind CSS is super easy in building mobile-first responsive designs. Every utility class can be used in conjunction with a responsive modifier. Take a look at the CSS below.

<div class="w-10 h-10 md:w-16 md:h-16 bg-black"></div>

If you will view the above HTML on 768px resolution (medium-sized screen), then there will be a larger square and if you will view it on less than 768px resolution (small-sized screen), then there will be a smaller square.

Incorporating the responsive design in the interfaces will help developers implement the interfaces in all the screen sizes. For more information on responsiveness, you can refer to the Tailwind CSS Responsive Documentation.

Color Palette of Tailwind CSS

Whenever we think of CSS, on the top of our head always comes a color palette. Tailwind CSS has a beautiful color palette, which includes 8 basic colors with 10 different shades. We can use these colors on any element like background, text, border, etc. on our website. Here is our square element with a blue background and white text.

<div class="w-10 h-10 bg-blue text-white">YO</div>

But the fun part is that we can customize the color, spacing, and everything else in Tailwind CSS. Due to built-in utility models, we can delete a ton of code and make the plugin system the way that new classes are registered. Unlike Bootstrap, we can have only that code which we are going to use in the projects and we will definitely ignore everything else.

// ...
module.exports = {
  // ...
  textColors: {
    'black': colors['black'],
    'grey-darker': colors['grey-darker'],
    'grey-dark': colors['grey-dark'],
    'red-dark': colors['red-dark'],
    'red': colors['red'],
    'blue-dark': colors['blue-dark'],
    'blue': colors['blue'],
    // ...
  }
}

Fully Customizable features in Tailwind CSS

Tailwind CSS is fully customizable. The utility classes can be overridden, extend, and add based on the customization. All this customization lives in a file called tailwind.config.js.

It is hard for maintaining the larger websites and thus using Tailwind CSS’ utility classes, we can create our customizable config file which includes custom themes, plugins and variants.

module.exports = {
   theme: {},
   variants: {},
   plugins: [],
   }

The amount of customizations is endless, and you can also benefit from the multiple Tailwind plugins available.

Removing unused CSS in Tailwind CSS

Tailwind has a ton of utility classes, which means that the initial file size is pretty large; however, Tailwind CSS uses PurgeCSS to remove unused CSS. It does this by simply comparing the CSS class names available in your template against the class names used and then removing the unused CSS. This means your final CSS file will only contain the utility classes you are using which will result in a really small CSS file size.

Smaller CSS file sizes will result in faster page loads, a better user experience, and better SEO.

Conclusion

In the past when we were using Bootstrap, multiple developers worked on one project and were adding different custom CSS which resulted in leads of heavier projects. Due to bloated CSS, the website gets heavy and the reloads get slower. Thus, with the Tailwind CSS in the market, we can solely rely on it with its better performance and better efficiency. Also, as per our opinion, we do not think that Tailwind CSS is going to go away in a short span of time, it is going to dominate the CSS arena for years to come.

Published At :02-May-20215 mins read

Author

Technology