So, what does tailwind mean? It is the wind blowing from behind the aircraft, having the same direction as the course of the movement of the aircraft. In business, the term “tailwind” refers to condition that will move profits to the next levels. So I guess Tailwind CSS utility library has the same function, to help you write CSS more easier and more maintainable.
Using classes in the unintended way
CSS classes are abstractions. A set of styles are defined in a CSS class that can be reused anywhere in your website because CSS has global scope and classes can appear multiple times in a page(not the same story with id attributes though). Tailwind uses HTML classes and each of these classes are a representation of one CSS property and value, separated by a dash.
This means that <div class=”float-right “></div> is equal to
.float-right {
float: right;
}Instead of grouping together multiple CSS rules for one element we actually migrate CSS into HMTL and a CSS rule turns into an HTML class that expresses that CSS rule, the closest way possible.
Are utility classes same with inline styling?
Well, not really because inline styling doesn’t support pseudo classes, media queries and interactions(:hover, :focus) but Tailwind does support all of these and it has some additional goodies too that I will describe to you later.
So what’s all the atomic CSS hubbub, bub?
Atomic CSS is the CSS architecture approach, where you use small, single-purpose classes with names based on visual functions. It can be written in 2 ways:
Static
Library with predefined classes with set variations that define a unit-based design system. This is easier, it is more easily understood, it’s like using properties with keyword values, it is familiar once it’s learned.
Programmatic
With a build tool automatically generates CSS classes and values based on what it finds in the HTML class.
<div class="Bgc(#000) P(15px)"></div>This will create an actual css class and CSS rule that looks like this
.Bgc\(#000\) { background-color: #000; }
.P\(15px\) { padding: 15px; }CSS accepts this syntax, by escaping the round brackets (css methods use these brackets). This way the brackets are considered simple text. The content inside the brackets are extracted and used in the value of the property.
Tailwind is based on Atomic CSS and all it does it has a library of utility classes defined that you can use to bring CSS into HTML but maintain separation of style and structure.
Give it to me straight, why should I use Tailwind CSS!
- it is a utility-first CSS framework, where most of the CSS properties are covered, but not all, that is why it is called utility-first and not utility-only, because the second part requires code writing, when you need to add additional properties that are not yet covered. The main idea is to use their predefined classes everywhere and write very small amount of custom code as possible. This way you have small css files and also because Tailwind eliminated the need to repeat code.
- even if it is a young creation, starting from version 2.1 it got a new engine, that is much faster, more powerful on-demand engine that makes possible that you the developer write CSS custom values directly in the class name(in case Tailwind did not cover that value in it’s predefined value list).
- You write much less code, because the property names in classes most of the times are shortened or even omitted or aliased in comparison with the CSS rule counterpart.
- You don’t have to switch between CSS and template files, because you write your “CSS” in the HTML and still maintaining separation of structure and style
- Since you apply the style directly to the tag, there will be no specificity issues
- Values are representations of the real value: .p-4 represents actually padding: 1rem. It’s like setting up a design system with relative values, like in clothing where L(Large) can represent a value of 42cm(not in all cases, depends how they define these measures).
- When you take a look at the html, you can make sense what style each HTML tag has, so it’s readable and easy to understand(not in case of abbreviations though)
- If you change something the risk of breaking something is 0. Since styles are local, applying directly on the element, making a change on it will not break the surrounding elements.
- No more brainstorming about new class names, utility classes are already named.
- Immutability of classes is another aspect. Utility classes don’t change in their purpose. If you need for example a variation of some utility class, you create a new one with a different class name, that’s it.
- you don’t have to use complex css selectors anymore
- composition is also a factor. We can combine these classes anyway we want
- Facebook used Tailwind for CSS “refactoring” and they say the CSS code was reduced with 80%
- unused css selectors are taken out from the bundle file with PurgeCSS by comparing files that use the css classes with the ones defined in the css(you should use it only in production, since it recompiles at each build)
How about the downsides of Tailwind?
- It is a low level framework, meaning, unlike other CSS frameworks like Bootstrap, Foundation, Bulma it doesn’t offer fully styled components, ready to be used in a plug and play fashion. You still have to do the heavy lifting(not so heavy anymore), but you also keep your freedom of creation. Depends what you are looking for.
- All that CSS will go into HTML classes, so that area will be pretty crowded, the HTML can get suffocating sometimes.(of course you can ease the situation by abstracting multiple Tailwind classes with the @apply directive(in moderation though, otherwise it defeats the purpose)
- It’s almost like learning a new language but only partially though, because it is expressive and if you know CSS it will be very easy to learn a “variation of CSS” also.
- Theming requires extra custom code. If you put for example .text-blue-400 in multiple components all over your website but management changes their mind and want to use a different theme, and instead of blue they want yellow, then you would have to change that class all over your website with .text-yellow-400 (of course you can define new custom color palette classes for your colours in the config file but that is extra work. You could name your colours .text-primary-400 and text-secondary-500)
- abbreviations of utility classes make them harder to be read and understood(but easier to write), they need to be mapped mentally
- classes are not direction aware: float-left in a direction: rtl; doesn’t make sense(perhaps float-start and float-end would be better just like in flex)
- It’s hard to find a specific HTML, if you don’t have a lots of class names on a lot of elements and none of them describe the “what is it” . They describe the how, meaning how does it look like, how much inner space does it have, visual cues in general (of course you can add additional component classes, like header, footer just for the sake of finding them easier)
- You loose certain features of CSS, like selector grouping with same CSS rules.
What’s next?
If you still want to learn about the Atomic CSS concept and get to know Tailwind better also find out about other CSS utility-first frameworks, please read the next article(- part 2)
