Tailwind CSS: Pros and Cons
Difference between traditional CSS and TailwindCSS
Introduction
The frontend developer community is sort of divided into two groups, one who likes to use the traditional fundamental CSS and the other who likes to use Tailwind to get rid of the additional unnecessary code in their project. So, let’s discuss whether switching to writing tailwind CSS is the future or whether we should stick to traditional CSS.
Topics covered
- What is TailwindCSS
- Pre-requisites
- Pros and Cons of TailwindCSS
- Differences between fundamental CSS
- Which projects to use it in
- Conclusion
What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework that provides a set of low-level CSS utility classes that can be used to build any design, without any limitations. It gives you the building blocks you need to create custom designs without writing any custom CSS.
Prerequisites for Using Tailwind CSS
Before using Tailwind CSS, there are some prerequisites that you should consider meeting to use the framework’s features without difficulties. Here are a few of them:
- Good knowledge of HTML, its structure, and how it works
- Solid foundation in CSS — media queries, flexbox, and grid system
Here is a quick example to demonstrate the basic differences between the two approaches:
Using fundamental CSS:
<div className="flex-container">
<div>Container 1</div>
<div>Container 2</div>
<div>Container 3</div>
</div>.flex-container {
display: flex;
justify-content: center;
align-items: center;
color: red;
}Using tailwindCSS:
<div className="flex justify-center items-center text-red">
<div>Container 1</div>
<div>Container 2</div>
<div>Container 3</div>
</div>As you can see, both the code segments achieve the same styling but tailwindCSS uses less code, and most importantly, does not need a separate CSS file to add styling. This improves the developer experience and reduces code.
Pros of TailwindCSS
- Speed: Tailwind CSS can help you write CSS faster, especially for complex layouts.
As seen in the previous example, it is evident that writing less code in TailwindCSS will significantly reduce time in development. It also eliminates the need for developers having come up with variable names for CSS classes, which becomes a nightmare in the later stages of the development, once old code is revisited.
TailwindCSS
<div class="flex justify-center items-center">
<h1 class="text-3xl font-bold">This is a heading</h1>
</div>FundamentalCSS
<div style="display: flex; justify-content: center; align-items: center;">
<h1 style="font-size: 3rem; font-weight: bold;">This is a heading</h1>
</div>As you can see, the Tailwind CSS code is much shorter and more concise. This is because Tailwind CSS provides a number of pre-built CSS classes that you can use to style your elements. This can save you a lot of time, especially when you are working on complex layouts.
2. Consistency: Tailwind CSS can help you create more consistent designs across your team.
Fundamental CSS has various variability in terms of code development approaches. For example, some developers might see fit to use rem instead of px for font sizes, whereas some developers like to use RGB instead of hex codes. These things can be overcome in TailwindCSS as the theme colors and fonts can be made in a separate global.css file and can be referenced just like the traditional CSS if needed.
TailwindCSS
/* tailwind.config.js */
theme: {
colors: {
primary: '#007bff',
secondary: '#6c757d',
},
fonts: {
sans: ['Roboto', 'sans-serif'],
},
}/* global.css */
body {
font-family: var(--font-sans);
}
.btn {
background-color: var(--color-primary);
color: #fff;
}<button class="btn">Click Me</button>In this example, we have created a Tailwind CSS theme file that defines the colors and fonts that we want to use in our application. We can then reference these variables in our global CSS file and in our HTML code. This helps to ensure that our designs are consistent across the entire application.
3. Flexibility: Tailwind CSS is very flexible and can be used to create any kind of design, from simple to complex.
Another advantage of tailwind CSS is that it falls right in the sweet spot of too much control with traditional CSS and No control of Bootstrap packages. Meaning, that it has the perfect blend of custom CSS’s control and Bootstrap’s themes and boilerplate code. This gives the UI a fresh look rather than a template-driven look.
<div class="flex flex-col items-center justify-between h-full">
<header class="flex flex-row items-center justify-between px-6 py-4">
<h1 class="text-xl font-bold">My App</h1>
<nav class="flex flex-row items-center justify-between">
<a href="#" class="text-gray-700 hover:text-gray-900">Home</a>
<a href="#" class="text-gray-700 hover:text-gray-900">About</a>
<a href="#" class="text-gray-700 hover:text-gray-900">Contact</a>
</nav>
</header>
<main class="flex-1 overflow-y-auto">
<section class="px-6 py-4">
<h2 class="text-xl font-bold">This is my main content</h2>
<p>This is a paragraph of text.</p>
</section>
</main>
<footer class="flex flex-row items-center justify-between px-6 py-4">
<p class="text-gray-700">Copyright © 2023 My App</p>
<a href="#" class="text-gray-700 hover:text-gray-900">Privacy Policy</a>
</footer>
</div>This example shows how Tailwind CSS can be used to create a complex layout with a variety of different elements. Tailwind CSS provides a wide range of CSS classes that you can use to style your elements in any way you like. This gives you a lot of flexibility in terms of the design of your application.
4. Maintainability: Tailwind CSS code is generally easier to maintain and update than traditional CSS code.
As tailwind classes are predefined with keywords already preset, the code is maintainable and developers can visit old code and can still visualize the styling instantly.
<div class="flex justify-center items-center">
<h1 class="text-3xl font-bold">This is a heading</h1>
</div>/* global.css */
.text-3xl {
font-size: 3rem;
}
.font-bold {
font-weight: bold;
}Tailwind CSS code is generally easier to maintain and update than traditional CSS code. This is because Tailwind CSS classes are descriptive and self-documenting. For example, the class text-3xl tells you that the element will have a font size of 3rem. This makes it easy to understand what the code is doing, even if you haven't seen it before.
Cons of TailwindCSS
But the question arises, are the pros effective enough to justify the shift from writing traditional CSS that frontend developers have spent years perfecting, to something new that needs a bit of time to get used to?
- Learning curve: Tailwind CSS has a learning curve, especially for developers who are new to it.
/* Tailwind CSS */
.flex.justify-center.items-center {
display: flex;
justify-content: center;
align-items: center;
}
/* Fundamental CSS */
.container {
display: flex;
justify-content: center;
align-items: center;
}As you can see, the Tailwind CSS code is a bit more verbose than the Fundamental CSS code. This is because Tailwind CSS classes are more specific. For example, the class .flex.justify-center.items-center tells you exactly how the element should be displayed. The class .container is more general.
2. File size: Tailwind CSS can increase the file size of your CSS, but this can be mitigated with minification and gzip compression.
/* Tailwind CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
font-family: sans-serif;
}
.btn {
background-color: blue;
color: white;
padding: 10px;
}/* Fundamental CSS */
body {
font-family: sans-serif;
}
.btn {
background-color: blue;
color: white;
padding: 10px;
}The Tailwind CSS code is slightly larger than the Fundamental CSS code. This is because Tailwind CSS includes a number of pre-built CSS classes. However, the difference in file size is not significant, and it can be mitigated with minification and gzip compression.
3. Vendor lock-in: Once you start using Tailwind CSS, it can be difficult to switch to another CSS framework or library. This is because Tailwind CSS is a very comprehensive framework. It provides classes for styling every aspect of your elements. If you switch to another framework, you will have to rewrite all of your CSS code.
4. Code-readability: TailwindCSS harms the readability of HTML and JSX files as long classNames hinder the clean code that is present if HTML and CSS files are separated.
Using traditional HTML and CSS file:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header>
<h1>My App</h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</header>
<main>
<section>
<h2>This is my main content</h2>
<p>This is a paragraph of text.</p>
</section>
</main>
<footer>
<p>Copyright © 2023 My App</p>
<a href="#">Privacy Policy</a>
</footer>
</div>
</body>
</html>CSS
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
header,
footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 6px;
}
header {
padding-top: 4px;
}
footer {
padding-bottom: 4px;
}
nav {
display: flex;
align-items: center;
}
nav a {
text-decoration: none;
color: #777;
&:hover {
color: #333;
}
}
h1,
h2 {
font-weight: bold;
}
section {
padding: 6px;
}Using tailwind to achieve the same design
Only HTML file
<div class="flex flex-col items-center justify-between h-full">
<header class="flex flex-row items-center justify-between px-6 py-4">
<h1 class="text-xl font-bold">My App</h1>
<nav class="flex flex-row items-center justify-between">
<a href="#" class="text-gray-700 hover:text-gray-900">Home</a>
<a href="#" class="text-gray-700 hover:text-gray-900">About</a>
<a href="#" class="text-gray-700 hover:text-gray-900">Contact</a>
</nav>
</header>
<main class="flex-1 overflow-y-auto">
<section class="px-6 py-4">
<h2 class="text-xl font-bold">This is my main content</h2>
<p>This is a paragraph of text.</p>
</section>
</main>
<footer class="flex flex-row items-center justify-between px-6 py-4">
<p class="text-gray-700">Copyright © 2023 My App</p>
<a href="#" class="text-gray-700 hover:text-gray-900">Privacy Policy</a>
</footer>
</div>The con of code readability is a subjective one. Some people find Tailwind CSS code to be more readable than traditional CSS code, while others find the opposite to be true. Ultimately, it is up to the individual developer to decide which framework works better for them.
Differences between TailwindCSS and Fundamental CSS
Traditional CSS is a more fundamental approach to CSS styling, where you write custom CSS rules to style each element on your page. Tailwind CSS, on the other hand, is a utility-first approach, where you use pre-built CSS classes to style your elements.
Another key difference is that Tailwind CSS is very responsive, meaning that your designs will look good on all devices, from phones to desktops. Traditional CSS requires you to write additional CSS to make your designs responsive.
Which projects to use Tailwind in?
Tailwind CSS is a good choice for a variety of projects, including:
- Small, static websites: Tailwind CSS can help you quickly and easily build small, static websites.
- Large, dynamic websites: Tailwind CSS can also be used to build large, dynamic websites, but it is important to note that the learning curve is higher for complex projects.
- Web applications: Tailwind CSS is a good choice for building web applications, especially if you need to create a custom design.
One thing to note is that, if you’re using tailwind for a full stack project without using a frontend framework, TailwindCSS might not be the best fit in that scenario. As, your frontend is plain HTML, CSS, and JS, reusability of components is non-existent, hence, it will give birth to unnecessary repeatable code with long classNames that you will find hard to maintain and will compromise developer experience and development speed.
If you are working on a full stack project without using a frontend framework, you may want to consider using a different CSS framework, such as Bootstrap or Foundation. These frameworks provide a set of pre-built components that can be reused throughout your application. This can help you to write less code and to create a more consistent design.
Conclusion
Tailwind CSS is a powerful tool that can help you write CSS faster and create more consistent and maintainable designs. However, it is important to weigh the pros and cons before deciding whether or not to use it for your project.
Additional thoughts
Tailwind CSS is a relatively new framework, but it has quickly become popular among front-end developers. It is still evolving, but it has a bright future.
If you are considering using Tailwind CSS, I recommend starting with a small project to get a feel for it. Once you have learned the basics, you can start using it for larger and more complex projects.
I also recommend checking out the Tailwind CSS documentation and community forum. There are a lot of resources available to help you learn and use Tailwind CSS.
