A Comprehensive Introduction to Tailwind CSS
Hello, dear friends. Welcome back to this article with me, Muhammad Alif Budiman. In this article, we are embarking on a new series about Tailwind CSS. In this series, we will delve into a highly popular CSS framework. In this article, we will begin with an explanation of what Tailwind CSS is. We will discuss its definition, concepts, and also explore how it differs from other commonly used frameworks like Bootstrap.
Understanding Tailwind CSS
Let’s start by looking at the definition directly from its official website, tailwindcss.com.
What is Tailwind CSS?
Tailwind CSS is described as ‘A Utility-first CSS Framework that packed with classes.’ This means that Tailwind is a CSS framework that prioritizes the use of utility classes. This framework provides numerous classes that we can use. Before delving deeper into Tailwind CSS, it’s essential to understand what utility-first means. Tailwind falls into this category of CSS frameworks.
Utility-First Approach: A Deeper Dive
As an illustration, let’s consider an alert component, as seen in the following image:
If we were to create an alert component like this using regular CSS, the code might look something like this:
<div class="chat-notification">
<div class="chat-notification-logo-wrapper">
<img class="chat-notificaiton-logo" src="img/logo.svg" />
</div>
<div class="chat-notification-content">
<h4 class="chat-notification-title">ChitChat</h4>
<p class="chat-notification-message">You have a new message!</p>
</div>
</div>.chat-notification {
display: flex;
max-width: 24rem;
margin: 0 auto;
padding: 1.5rem;
border-radius: 0.5rem;
background-color: #fff;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04)
}In this example, we create a div with classes chat-notification or chat-alert as desired. Within it, there are additional div to store an image and text. We also separate these div and apply flex properties to arrange them horizontally or vertically.
However, this is not a utility-first approach; it’s more of a component-first approach. We treat the elements as components and apply styles to those components. One component can have multiple styles. This is a different approach from utility-first.
Now, let’s see how we can achieve the same result with Tailwind CSS. The appearance might be similar, but let’s examine the HTML code.
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
<div class="shrink-0">
<img class="h-12 w-12" src="img/logo.svg" />
</div>
<div>
<h4 class="text-xl font-medium text-black">ChitChat</h4>
<p class="text-gray-500">You have a new message!</p>
</div>
</div>In the HTML above, we use classes like p-6 , max-w-sm , and mx-auto. In Tailwind, we don’t need to write CSS manually; we simply call these classes. All these classes are known as utility-classes, meaning each class serves a specific function.
For example, p-6 means adding padding of 6 to all sides (top, right, bottom, left), max-w-sm sets the maximum width to “small” size, and mx-auto automatically adds margin on the horizontal axis, centering the element. So, each class does one thing. This is a characteristic of the utility-first approach, where we focus on utility classes for styling.
Why Choose Tailwind CSS?
Tailwind CSS is an excellent choice for web developers for several compelling reasons. Firstly, Tailwind offers a streamlined and efficient approach to web development through its utility-first methodology. This approach allows developers to rapidly build modern and responsive websites without having to write extensive custom CSS styles. With a rich set of utility classes at your disposal, you can easily design layouts, apply styles, and manage interactivity with minimal effort. This drastically reduces the need for writing and maintaining complex CSS files, resulting in cleaner and more maintainable code. Additionally, Tailwind’s utility classes are highly expressive, making it easy to understand the purpose and functionality of each class, which aids collaboration among developers.
Secondly, Tailwind promotes flexibility and customization. Unlike some other frameworks that come with pre-designed components and styles, Tailwind provides a framework that lets you craft your unique designs while still maintaining consistency and best practices. This empowers developers to create tailor-made user interfaces that precisely match their project requirements. Furthermore, Tailwind’s responsive design capabilities allow for seamless adaptation to various screen sizes, simplifying the development of mobile-responsive websites. Overall, Tailwind CSS strikes a balance between efficiency and creative freedom, making it a powerful tool for building modern web applications.
Addressing Common Questions
However, you might start wondering:
- Isn’t this similar to using inline CSS?
- How does it differ from Bootstrap?
- Doesn’t this sacrifice semantics?
Don’t worry; we will address these questions one by one in this article.
Tailwind CSS: A Closer Look
Now that we know Tailwind is a utility-based CSS framework providing many classes for rapidly building modern websites. So, we don’t even need to touch separate CSS files because all CSS utilities are turned into classes within our HTML. This is one of Tailwind’s most appealing features; we don’t need to deal with separate CSS. Everything can be managed through utility classes within our HTML.
Creator and History
Now, let’s take a closer look at its creator. The creator of Tailwind CSS is Adam Wathan, and Tailwind CSS was first released on November 1, 2017. As of the time of writing this article, the latest version is 3.3.3, and if you visit its GitHub repository, you’ll see that Tailwind CSS has received over 70,000 stars.
Extensive Utility Classes
Next, let’s explore the various utilities we can customize in HTML. In general, almost all CSS properties have corresponding utility classes. This includes preflight, used to reset default properties in HTML elements. With Tailwind, you can control layout, use flexbox and grid, adjust spacing like margin and padding, and set element widths and heights. Tailwind also provides utilities for typography, backgrounds, borders, effects, filters, transitions, transformations, and animations. One interesting feature is the ability to style tables easily. This means you can manage most commonly used CSS properties directly through HTML classes without creating separate CSS files.
Customizable and Responsive
Tailwind allows you to customize your styles as per your project requirements. You can easily add interactivity to elements using utility classes. Creating responsive layouts for your web pages is a breeze with Tailwind. It simplifies the addition of dark mode to your application. Moreover, if your HTML elements are reused as components, Tailwind’s reusability feature can be a significant asset. If Tailwind’s default styles don’t meet your needs, you can effortlessly add custom styles. Tailwind also utilizes a preprocessor, enabling you to use functions and directives, much like in Sass. All these features make Tailwind a powerful framework
Color Palette and Typography
Moreover, there are numerous color options available, including most commonly used color palettes. If you need a very specific color with a specific hex code, you can easily specify it.
For typography, you can easily set font types, whether they are sans-serif, serif, or monospace, along with various other settings. All of this is available in the official Tailwind documentation.
Interactive Elements
<button class="bg-sky-600 hover:bg-sky-700">
Save changes
</button>For example, if we want to create a button with a sky blue background (sky blue-600), we can use the “bg-sky-600” utility class. However, if we want to make it interactive, like changing the background color when hovering over the button, we can add the “hover:bg-sky-700” utility class. This is one of Tailwind’s advantages: the ability to easily add such interactions to elements by combining utility classes. Many other utility options are available in the Tailwind documentation.
There are many features beyond the “hover” function that can be applied, including pseudo-classes and pseudo-elements, which will be discussed in another article.
Responsive Design
Regarding responsive design, you can specify multiple breakpoints (breakpoints). This allows you to style elements at specific screen widths. For instance, at the default screen width for mobile devices, if you apply a utility class without a screen width prefix, the style will be applied to all screen widths. However, if you add a specific prefix, the style will change according to the corresponding breakpoint.
<div class="flex flex-wrap">
<div class="bg-sky-500 w-full h-[300px] md:w-1/2 lg:w-1/3 mt-2 border-4 border-black"></div>
<div class="bg-sky-500 w-full h-[300px] md:w-1/2 lg:w-1/3 mt-2 border-4 border-black"></div>
<div class="bg-sky-500 w-full h-[300px] md:w-1/2 lg:w-1/3 mt-2 border-4 border-black"></div>
</div>For example, at a small screen width, you might want one columns, while at a medium screen width, you might want two columns. And at a large screen width, the elements adapt to the desired layout.
Dark Mode
Finally, you can easily apply responsive styles by providing a prefix like “dark.”
<div class="bg-white dark:bg-black>
...
</div>If you want to enable dark mode, you can set the element’s appearance according to the mode, whether it’s dark or light, and even automatically follow the system’s mode preference or use provided buttons or toggles.
Comparing Tailwind CSS to Bootstrap and Vanilla CSS
What if we compare not just Bootstrap and Tailwind, but also use Vanilla CSS, which means pure CSS without a framework? Let’s compare by taking a concrete example. Suppose we want to create the same component, a simple button with a blue background and white text.
Vanilla CSS
<button type="submit" class="button">Submit</button>.button {
padding: 6px 12px;
border-radius: 4px;
background-color: #0D6EFD;
color: white;
border: 0;
transition: 0.2s;
}
.button:hover {
background-color: #0B5ED7;
}First, we need to describe the button. We need to specify the button type, such as submit, and we can give it a class name as we like, say button. However, we also need to write CSS that matches the “button” selector to connect this component with that class. We need to set various CSS properties like border-radius, background color, text color, and hover effects. All of this has to be written manually, as we should know how to do, by writing several lines of CSS like this. There are two things to create here: HTML and CSS for Vanilla CSS.
Bootstrap
<button type="submit" class="btn btn-primary">Submit</button>Now, if we use Bootstrap 5, for those familiar with it, this should be very easy. We only need to call two classes: one for content layout and one for button type (e.g., “btn”). However, in the first class, we can also add btn-primary to specify that this button should have blue as the primary style. Bootstrap takes care of most default styles, and we only need to select the appropriate classes. So, from a coding perspective, this is much easier because we only need to focus on HTML and selecting the right classes.
Tailwind CSS
<button type="submit" class="bg-blue-500 text-white px-3 py-2 rounded hover:bg-blue-700">Submit</button>But now, what if we use Tailwind? It’s somewhat different because we have to create everything ourselves, much like with Vanilla CSS. Although we don’t write CSS explicitly, we design its utility classes within the component. So, if we want to create a button like before, we need to set background color, text color, border-radius, and hover effect directly within classes. The difference is that Tailwind has built-in utilities for this, so we only need to configure the classes.
Which is Better ?
So, in this case, the difference when writing the same component using these three methods is that the end result may be similar, though not 100% the same but quite close. Or if you ask, which one is better among the three? Well, let’s compare one by one.
First, for Vanilla CSS, the advantage is that you have full control; you write your own class names and CSS. Moreover, your CSS code can be more optimized because you can remove unused CSS code and easily modify it when HTML components change. However, the drawback is that you have to start from scratch, and it takes longer to create.
Meanwhile, Bootstrap 5 speeds up coding significantly because you only need to focus on HTML and select the appropriate classes; you don’t have to worry about CSS. It’s very beginner-friendly and provides many ready-to-use components that you can copy-paste from the documentation. However, the downside is that you don’t have full control; Bootstrap handles most of the styling, and a lot of CSS code goes unused if you only use a few classes. Also, if a website uses Bootstrap, it can easily be recognized due to its distinctive style.
Lastly, Tailwind makes development faster, like Bootstrap, but you have to design your utility classes yourself. This makes it more flexible than Bootstrap because you have full control, but you don’t have to write CSS explicitly. Tailwind also follows best practices in utility usage, and its components are relatively responsive. However, the HTML code can become less tidy if you have many utility classes, and you still need to understand CSS.
So, the bottom line is that none of them is inherently better than the others; each has its pros and cons, and the choice depends on your project’s needs. Vanilla CSS gives you full control, Bootstrap accelerates development, and Tailwind provides flexibility without writing CSS explicitly.
Addressing Key Questions
Alright, next, we will try to answer these three questions.
Isn’t this similar to using inline CSS ?
It may look similar, but there is a difference. Using inline CSS is not as flexible as Tailwind because you cannot add interactivity and responsiveness using inline CSS, such as hover or media queries, for example.
<button type="submit" class="bg-blue-600 w-full text-white px-3 py-2 rounded hover:bg-blue-700">
Submit
</button>How does it differ from Bootstrap ?
You should be able to see the difference by examining the behavior of their classes. Actually, it should be quite clear that these two frameworks are different. Bootstrap is a UI framework, whereas Tailwind is referred to as a utility-first framework. Why? Because in Bootstrap, you not only have utility classes but also pre-made components like card and others. Meanwhile, Tailwind by default does not have pre-made components; everything is utility-based. That’s why Bootstrap is often called a UI framework because it offers many ready-to-use components, which you simply call by adding classes, such as card .In contrast, with Tailwind, you need to design your own utility classes.
So, if we look at types of UI frameworks and utility-first frameworks, we will find many variations. For UI frameworks, there’s Bootstrap, Material UI, Foundation, Semantic UI, Bulma, and many more. Meanwhile, for utility-first frameworks, besides Tailwind, there are others like Tachyons, ShedCSS, BassCSS, Expressive CSS, and more. In utility-first frameworks, there are no pre-made components; it’s all about utility classes, although Tailwind, in particular, does offer some components that you can use if you visit their website, “tailwindui.com.” However, these components are paid.
Doesn’t this sacrifice semantics ?
Theoretically, if not used carefully, using utility classes in Tailwind could result in less semantic HTML code. This is because utility classes often encompass many style rules related to appearance and may not always reflect the true meaning of HTML elements. However, it also depends on how you implement it. You can still maintain semantic HTML by using Tailwind classes wisely and documenting them effectively in your code. So, semantics can still be preserved with proper usage.
You can still create your components and name them whatever you like to make them semantic and reusable, but that will be discussed in another article.
Conclusion
In this introductory article, we’ve shed light on Tailwind CSS, a utility-first CSS framework that empowers you to build modern websites efficiently. It offers a rich set of utility classes that streamline styling without the need for separate CSS files. Tailwind CSS boasts interactivity, responsiveness, reusability, custom styling, and the convenience of preprocessing.
We’ve compared Tailwind CSS to Bootstrap and vanilla CSS, highlighting the strengths and weaknesses of each approach. Tailwind CSS combines speed and flexibility, making it a versatile choice for web development
Okay, now you should have a basic understanding of what Tailwind is. Hopefully, you’re becoming more curious and motivated to follow this series.
In the next article, we will delve deeper into why Tailwind was created, its purpose, and how it has evolved. So, stay tuned. See you in the next article.
I’m Muhammad Alif Budiman, Greetings from Copy Paste World.
References:
Tailwind CSS — Rapidly build modern websites without ever leaving your HTML.
Web Programming UNPAS — YouTube
