Why use Tailwind CSS?

Simply stated, Tailwind CSS is a Cascading Style Sheet (CSS) framework, which aids in a faster and easier development in User Interface (UI) components. It is not the first or the most used CSS framework, however there are great advantages in deploying this framework.

Overview

Traditionally, one would need to write individual lines of code from scratch in the CSS library in order to create the layout of the UI. Such a layout could be anything from a web page to a mobile application to a proprietary software.

Writing these lines of code from scratch can not only consume time but data, and the CSS library file can become quite large in Megabytes. This is where Tailwind CSS shines. Having a smaller file size footprint (typically around 10 Kilobytes) allows for faster downloads and a more responsive experience. The reason behind such a small footprint is due to minification, compression and generating only the CSS code needed for the project.

Furthermore, the Tailwind CSS library is also highly customizable and allows for dynamic change. This can be accomplished by adding a parameter in the HTML (Hypertext Markup Language) element and not needing to invent class names (see example below).

In summary, not only can Tailwind CSS provide a faster, more comprehensive experience, but also allow the developer to adapt and change the code according to the end user.

Below we will see an example of a regular CSS writing and the same code written in Tailwind CSS.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Ark-am</title>
    <style>
      h1 {
        color: #fff;
        background-color: #000;
        text-align: center;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to Ark-am support!</h1>
  </body>
</html>

Example-1

The above code can be written in Tailwind CSS as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Ark-am</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <h1 class="mt-4 text-white bg-black text-center text-3xl font-semibold p-[20px] font-serif">Welcome to Ark-am support!</h1>
  </body>
</html>

Example-2

And also if we want to customize more in Tailwind CSS, we can do it as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Ark-am</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <h1 class="mt-4 text-white bg-orange-800 text-center text-3xl font-semibold p-[20px] font-serif">Welcome to Ark-am support!</h1>
  </body>
</html>

Example-3

Here above by just adding bg-orange-800 in the class, we can change the background color from black to orange.

Advantages of Tailwind CSS

As mentioned earlier, Tailwind CSS is not the only framework, but the rise in popularity is a noteworthy factor. Frameworks such as Bootstrap and Materialize are well versed in the web development community. Blueprint was the first CSS framework, which was released in 2007. These frameworks have their individual advantages and disadvantages. We can explore them in more detail on a future blog, but for now, Tailwind CSS is slowly gaining momentum and the following points are the reasons behind the increase in popularity:

Ease of use – With great documentation and community support, learning the syntax becomes effortless; a significant factor as to why developers from all levels are adopting this framework.
Low-level API – Having a low-level Application Programming Interface (API) allows for more detailed control, especially when manipulating functions.
Customizability – Possessing an extensive library where each component is changeable, the fear of being restricted by the framework is of little concern.
Performance – The introduction of just-in-time compiler allows one to generate the style real-time rather than in advance during the initial build.

Conclusion

As a CSS framework, Tailwind CSS offers a great ecosystem for design and development. From the comprehensive documentation and online support to the customizability and performance levels, this framework has few limitations for those using it for their applications. Hence why we used this for the Ark-am website. We were able to rapidly change components in the UI and adjust the layout for all screen sizes with very little effort.

Share this at