What is Tailwind CSS ?
We hope an introduction to web frameworks is necessary to understand Tailwind CSS better since Tailwind CSS itself is a front-end CSS framework. Web frameworks are platforms that provide the foundation for developing web pages. It can be simply understood as a template of a working page that can be selectively modified by adding code.
The advent of web frameworks pretty much eliminated redoing web pages from the beginning and also facilitated the reuse of codes. There are both front-end and back-end frameworks. The front-end frameworks determine the appearance of a webpage and run on the browser, unlike back-end frameworks that run on the server.
They often feature pre-written and reusable code modules, standardized front-end technologies, and ready-made interface blocks, allowing developers to create long-lasting webpages and UIs without having to code every function or object from start.
Some of the popular front-end frameworks are Bootstrap, Bulma, Foundation, and Materialize. Contributing towards saving a lot of time and effort, web frameworks are supposed to make the life of developers easier. But do they always succeed in doing that? Unfortunately, ‘yes’ is not the right answer.
Let’s take Bootstrap as an example. Bootstrap acts as a UI-kit/component library. It provides default UI themes and pre-designed components like buttons, navbars, etc. A web developer can put them to use and design stylish and responsive user interfaces in a time-efficient manner. Anyway, all Bootstrap websites look similar due to this. But what if the developer wants to create a unique design? Does Bootstrap allow it? The answer is a bit complicated.
Making a unique design using Bootstrap is possible only by editing the codes of the pre-designed components and themes. This means overriding the CSS files. Although frameworks like Bootstrap have this option, it is pretty much pointless. Because we would have to override it quite extensively for creating a custom UI.
Please remember that as developers, we opted for a framework in the first place to make our jobs easier. Writing more CSS leads to more effort and time being spent. It also increases the size of the CSS files which may lead to confusion at the later stages of development. Most of the websites that use frameworks look similar due to this.
Tailwind CSS presents a solution to this. Websites built using Tailwind CSS cannot look similar to each other. Unlike Bootstrap and Bulma which have components and themes that are hard to customize, Tailwind CSS is highly customizable. It allows to execution of unique designs. It gives flexibility and more control over the appearance of the website. Tailwind’s API (Application Programming Interface) is a collection of class names. These class names/utility classes allow you to specifically target what you need.
If you want to design a nav element using Tailwind CSS, you have to ‘almost’ build it yourself. But the process is much easier with the class names.
How does it work ?
This is what Tailwind CSS looks like:
<nav class= "flex items-center justify-between p-6 container max-auto"
flex – applies the display: flex property to the element
items-center – using flexbox it will vertically align the elements within the nav HTML tag
p-6 – adds padding to all the directions for the <nav> element
container – sets the max-width of an element to match the min-width of the current breakpoint (by default 1280px max-width)
max-auto – applies a margin: auto, thus centering the nav element horizontally
Per each discrete style that can be applied on a page, there is a discrete tailwind class name like flex, pt-4, text-center, and rotate-90. This may look confusing at first because Tailwind CSS follows the API of Atomic CSS.
“Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function.”
Atomic CSS is also known as Functional CSS and Utility-First CSS.
This simple analogy would hopefully help you understand the advantage of using Tailwind CSS over Bootstrap
Imagine if you were an architect and both Tailwind CSS and Bootstrap were two kinds of designing technologies for building houses. Bootstrap gives you pre-designed rooms like Bootstrap-style bedroom, Bootstrap-style kitchen, Bootstrap-style living room, etc. that would allow you to build a good house in a short amount of time. But no matter what you do, all the houses that follow the Bootstrap technology will look alike. From the first viewing itself, anyone could make out that the rooms are Bootstrap-style rooms.
On the other hand, Tailwind CSS would not give you pre-designed rooms. Instead, it gives Tailwind-style doorknobs, Tailwind-style porcelain, Tailwind-style carpet, etc. to arrange in any combination that you would prefer. It enables you to custom-design rooms according to your preference and ultimately constructs a house with a unique design that is not similar to houses that use the same technology.
Similar to this, the utility classes of Tailwind CSS enable you to custom-design UI components and themes. But Bootstrap’s UI themes and pre-designed components like buttons and navbars will look alike, causing all bootstrap websites to have the same appearance.
Break some rules
Tailwind CSS is written within the HTML markup. Yes, you read it right. It is written in inline style within the HTML file, although there will be a separate CSS file. This is hugely against the convention of developing but has noteworthy benefits.
- Style as you go
You don’t have to switch between the HTML and CSS files back and forth while implementing styling. This saves a lot of time and confusion.
- Lean CSS
The size of the CSS file will be smaller since most of the styling will be within the HTML markup.
Is it all good ?
Having talked about the positives, let’s have a look at the limitations of Tailwind CSS.
- Hard to understand as a beginner
To maneuver Tailwind CSS, learning the API is a must. But it can be hard to learn all the utility classes in the beginning. But once you become familiar with them, you can explore their full potential.
Interestingly, an overlooked advantage of Tailwind comes with learning the class names. Since these class names have specific functions, it can avoid confusion when the file is handled by multiple developers.
For example, if you leave a project at a later stage of development, it would be usually hard for another developer to pick up from where you left. But if the project was employing Tailwind CSS, the developer will find it easier to take over if he/she is familiar with Tailwind CSS’s API.
- Busy HTML markup
While the CSS file is very lean, the HTML markup will be very busy and a mix of both HTML and CSS. It is against the principle of separation of concerns (SoC) which is hugely preferred by developers to avoid confusion.
First released in 2017, Tailwind CSS has several updated versions now. Tailwind CSS V3.0 is the latest. Each new version comes with new features that expand its potential even further. According to the opinion of several experienced developers, Tailwind CSS is unlike any framework they have used before. It not only helps save their time but also has given them the power to create unique designs.
Although Tailwind CSS has its share of flaws, its brilliant benefits clearly outweigh them. It is indeed a valuable skill to master Tailwind CSS at the present time when unique designs are the need of the hour.