Skip to main content

Front-End Development

Introduction to Tailwind CSS  

Shot of a team of executives having a formal meeting in a boardroom

What is Tailwind CSS?

Tailwind is a utility CSS library that allows developers to use the styling properties within the HTML file. It is done by labeling the class name as styling properties. Instead of defining the class name such as Navbar, and Footer, developers can define the classes as styling properties. Such as display flex, justify-content center, etc.

So, for defining Footer Component, we are supposed to define all the styling properties as a class name required to create Footer Component. This enables developers to create applications faster and easier.

Introduction to Tailwind CSS UI

Fig1:- Basic Tailwind CSS

 

Code for developing the above UI using Vanilla CSS

<head>
    <style>
.Intro{
  font-size: 35px;
  padding-top: 6rem;
  padding-bottom: 6rem;
  padding-left: 6rem;
  padding-right: 6rem;
  background-color: rgb(185 28 28);
  margin: 2.5rem;
  }
    </style>
</head>
<body>
    <div class="Intro">
        Introduction to Tailwind CSS
    </div>
</body>

Code for developing the above UI using Tailwind CSS

<head>
    <title>Tailwind CSS</title>
</head>
<body>
    <div class="text-[35px] py-24 px-24 bg-red-700 m-10">Introduction to Tailwind CSS</div>
 </body>

It is a way of writing CSS in inline styling that further allows customizing the design patterns with the reusability of the components.

 

Why Use Tailwind CSS?

Since it is a Utility CSS library, it allows one to style a component from scratch and override it to a style defined in the CSS component. Using Tailwind CSS will reduce writing more CSS as the customization of the website increases, which causes an increase in CSS file size while using Vanilla CSS.

Some Advantages of Using Tailwind CSS:

  • It avoids using random names of Classes and Ids.
  • Easy to update the CSS without breaking some parts of the Website.
  • It eliminates the media query pain from the project.
  • Can freely build complex responsive layouts.
  • Also, it can Be Optimized Using Purge CSS to remove unnecessary styles and reduce the HTML file’s size.

How is it Different from Another Framework like Bootstrap?

  • Unlike Bootstrap, Tailwind CSS does not contain any pre-styled components. It instead gives utility classes that can be used to build custom components with these utility classes. It enables developers to include many utility classes combined with custom styles to get results.

Screenshot (159)

Fig2:- Tailwind CSS

Bootstrap Code:

<body>

    <button type="button" class="btn btn-primary">Tailwind CSS</button>

</body>

 

Tailwind Code:

<body>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Tailwind CSS
</button>
</body>

 

Simple one-liner code can create this button using Bootstrap, but further customization, like some slight changes in size for a specific page, would let you create a whole new sizing class for that case. In contrast, in the case of using Tailwind CSS for those changes, there are lots of padding classes that are used to get the result. Also, Tailwind CSS does not require a large set file for larger components and functionality. Instead, it only requires a base file of the stylesheet that hardly occupies about 27 kb.

References:

https://tailwindcss.com/

https://getbootstrap.com/

 

Conclusion:

Since using Vanilla CSS can increase the pain in various aspects and Bootstrap CSS does not allow customization as per the requirement, Tailwind CSS is like living between Vanilla CSS (Convention) and Bootstrap CSS (Configuration).

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Somnath Maity

Somnath Maity is an associate technical consultant at Perficient and has over a year of front-end web development. He is eager to learn and work on the latest technologies required in front-end development.

More from this Author

Follow Us