A look at Tailwind CSS
I’ve seen a lot of hype this year around the popular CSS framework, Tailwind CSS. And thought I’d share some thoughts and concerns about this UI framework. I gained a little experience writing CSS with a utility-first approach when I started my career in front-end development a few years ago.
To the start Frontend development course We are sharing an article, the author of which decided, perhaps, to slightly change the way Tailwind is perceived, to talk about both the positive and negative aspects of the framework, especially in the context of working with multilingual sites.
Things I find interesting
You don’t need to close the file with HTML
The main headline on the official Tailwind website reads:
Create modern websites quickly without ever leaving HTML.
I agree that writing code in one place can be faster than switching between different files. However, leaving my HTML aside is no problem for me. This can help to switch context between markup and styles. Separating HTML and CSS files can help me focus better on the task at hand. However, when markup and styles mix, when you are working on a complex, multilingual, responsive site and UI with themes, things can go awry.
When I work with Tailwind, it’s like holding two pens, one for sketching and the other for coloring. Writing markup and CSS at the same time reminds me of those two handles.
Tailwind is very different in that the colored pen has limitations or constraints. In other words, you can only paint with preset colors. For me, it’s better to focus on writing accessible, semantic markup and then work on styling separately.
Design constraints
In a design system, we usually define color, spacing, size, and other properties. The developer’s job is greatly simplified when there are limits to what he can do. Tailwind has some nice constraints. The idea of defining custom config files is very useful.
Naming CSS classes
You don’t need to think about CSS class names and can speed up the implementation of layouts on the web. I find this helpful when your boss writes to you that there is an urgent landing page that needs to be done today and you only have 3 hours to write it. Tailwind can help you get things done quickly.
However, if you stick to the separation of markup and styles, development will take much longer. Another useful use of Tailwind is competition or hackathon. The most important thing at such events is to do work and get something for it. Nobody cares about how you wrote the CSS, right?
What I disagree with
Tailwind is not a utility-first framework
A subheading on their website says CSS Tailwind:
First of all, a utilitarian CSS framework, contains classes like …
From what I saw, I concluded that Tailwind is only a utility-only framework. Maybe the name “only utilitarian” will affect how newbies will perceive it? I rarely see any site using Tailwind and adopting the utility-first concept.
Long list of classes can be confusing
Please note what I know about the @apply method. Consider an example from the Tailwind documentation:
<input
class="block appearance-none bg-white placeholder-gray-600 border border-indigo-200 rounded w-full py-3 px-4 text-gray-700 leading-5 focus:outline-none focus:border-indigo-400 focus:placeholder-gray-400 focus:ring-2 focus:ring-indigo-200"
placeholder="jane@example.com"
/>This is an input field with 17 CSS classes… Which is easier: read classes one by one horizontally, or scan them from top to bottom? This is how the field will look like styling this field in the CSS file:
.c-input {
display: block;
appearance: none;
background-color: #fff;
@include placeholder(grey);
border: 1px solid rgba(199, 210, 254, var(--tw-border-opacity));
border-radius: 0.25rem;
padding: 0.75rem 1rem;
line-height: 1.25rem;
color: rgba(55, 65, 81, var(--tw-text-opacity));
}
.c-input:focus {
/* Focus styles.. */
}I can read and understand what styles this input field contains much faster than when I scan HTML. Perhaps there are plugins for code editors that automatically format HTML classes so that each one is located separately. [на отдельной строке]but the browser DevTools doesn’t.
I know about the @apply method, but every time I think of it, I find it is contrary to the core concept of Tailwind. Here’s the same example (input field):
.c-input {
@apply block appearance-none bg-white placeholder-gray-600 border border-indigo-200 rounded w-full py-3 px-4 text-gray-700 leading-5 focus:outline-none focus:border-indigo-400 focus:placeholder-gray-400 focus:ring-2 focus:ring-indigo-200;
}Look at the length of the class list. If utility is a priority in Tailwind, why do we rarely see @apply in the official Tailwind documentation or in the Tailwind UI? Again, I see Tailwind as just a utilitarian framework.
Always give names to elements
In a design system, it is difficult to discuss a specific component without agreeing on its name. The reason is this: you won’t send your colleague a message like this:
Hi, have some news about “bg-white w-full py-3 px-4”?
In fact, the phrase will be like this:
Any news on polarized card design?
At the end of the day, you will need to sit down and think about a unique, meaningful name for each component of the project you are trying to develop. This applies, of course, to a situation where you want to scale and maintain a project over the long term. Some time ago, I joked with a friend about this: what if we put “traditional naming” aside and call ourselves not traditional names, but as in the code below:
<person class="hair-brown length-[175] face-rounded"></person>The code above is nonsense. Much better code like this:
<person class="ahmad"></person>Some classes are confusing
When I first started using Tailwind, I needed to add a class that is responsible for the align-items: center property. My first thought was to use align-center, but that didn’t work.
I looked at the documentation and got confused. The items-center class will add the align-items: center CSS property, where the align-middle class will contain vertical-align: middle. It takes a little muscle memory to memorize them.
Experienced web developers can easily adapt to this and it won’t be a big problem for them. But the fun part is for the newbie to CSS. Learning Tailwind without a solid knowledge of CSS can lead to misunderstandings in the future. For example, if a developer started his career with only Tailwind, then when asked to write CSS from scratch, he will not be able to do it. I am not saying that this is impossible, but it will take time and effort.
Tailwind makes it difficult to customize the design in the browser
I do both design and frontend development, so in-browser editing with DevTools is extremely important to me. With Tailwind, DevTools can get tricky. Let’s say for example I want to change the padding for a component. When I change the value of the py-3 class, it affects every page element that uses it.
The only way to remove it is to open the .cls menu in DevTools, after which the class can be toggled. However, this does not solve the problem. What can I do in this case? Add inline styling via DevTools, which I don’t like. The problem can be solved by simply giving the elements names. To add to this, the total file size for the complete Tailwind assembly is 12 MB. Editing CSS in DevTools will be very slow.
This means browser development is ineffective. The Tailwind team recently released a JIT (just in time) compiler that removes unused CSS. This gets in the way of the whole design idea in the browser.
I typed back and got a long list of all available CSS classes. There will be no such hints during JIT compilation.
Tailwind is inconvenient for multilingual sites
To help you understand more, I will add: I am working on websites that should work in both English (left-to-right, LTR) and Arabic (right-to-left, RTL). Consider a code like this:
/* LTR: left to right */
.c-input {
padding-left: 2rem;
}In a separate CSS file for RTL, the style will look like this:
/* RTL: Right to left */
.c-input {
padding-left: 0;
padding-right: 2rem;
}In the above example, padding should be expanded based on the direction of the page (left to right or right to left). There are already plugins for this, but they only solve the problem from the outside. The first one I found does the following:
html[dir="rtl"] .ml-2 {
margin-right: 1rem;
}This is not a good solution for me. The second plugin I found was slightly different from the first one:
[dir="rtl"] .rtl:text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}This kind of code can get out of hand very quickly. While researching one website, I noticed over 30 CSS classes.
This is an example of how Taillwind can get out of hand, especially with newbies. Thirty classes for a button component is too many. In this case, I’d rather work with inline styles.
To help build a multilingual website, I am currently using Bi-App Sass… Here’s an example:
.elem {
display: flex;
@include margin-left(10px);
@include border-right(2px solid #000);
}The code will compile into two different CSS files. Ltr file:
/* LTR Styles */
.elem {
display: flex;
margin-left: 10px;
border-right: 2px solid #000;
}Read more about styling RTL in this guide from yours truly.
I don’t always work with templates
One of the problems with Tailwind is that if you have a list of cards and want to change a specific set of classes, you have to manually view them in a code editor. This will not be a problem if you use partial CSS files or components in your product. You can write HTML once and any change will be reflected wherever this component is used.
It is not always so. I’m working on simple index.html pages where the effort of splitting into parts or components doesn’t pay off. In this case, working with Tailwind and editing the CSS can become an error-prone process, since you cannot even use the Find and Replace function: it can miss some other elements on the page.
Tailwind makes websites look like
The Tailwind team has created a set of thoughtful components called Tailwind UI, which are easy to customize and ready to use in your project.
The look and feel of the components is nice and I love it. Although there are problems, if a site uses the Tailwind UI, there is a good chance that I will predict how to use it.
Usually when you work on Tailwind UI, it means you don’t have time to create custom designs, so you need something to get up and running quickly, right? And that’s a good use case, except for one detail: Using Tailwind will make many sites look similar to each other, much like Bootstrap did many years ago.
Some CSS properties or features cannot be used
For example, the clip-path property is not included, and I fully understand the reason. Let’s say we want to include it as a component. Where should we write the code? Here:
<article class="block appearance-none bg-white placeholder-gray-600 border border-indigo-200 rounded w-full py-3></article>Or include it in the Tailwind configuration like this:
// tailwind.config.js
module.exports = {
theme: {
clipPath: {
// Configure your clip-path values here
}
}
};Or do the following:
.card {
@apply block appearance-none bg-white placeholder-gray-600 border border-indigo-200 rounded w-full py-3;
clip-path: inset(20px 20px 50px 20px);
}Final thoughts
Can Tailwind wrap CSS in its classes at compile time?
Imagine Tailwind only appears at compile time. That is, you write regular naming CSS and all that, and a clever compiler converts your CSS into utility classes. It would be a dream come true.
Utility classes are a powerful tool if you don’t overdo it
In my current projects, I use a combination of utility classes and regular CSS. For me, this is the perfect combination. I do not lose the power of utility classes and at the same time use them without cluttering the HTML.
The frontend is often chosen as the “entry point” to IT. But the frontend is not only the external design of sites, but also work with databases, as well as external APIs. The frontend requires systematic, comprehensive preparation. If you or your friends are interested in this direction of development, you can take a closer look at our Frontend development course, where we deal not only with the aforementioned topics, but also developing responsive sites using flexbox, working with the BEM methodology and touching on other aspects of the frontend.
find outhow to level up in other specialties or master them from scratch:
Other professions and courses
PROFESSION
COURSES
