So far we’ve seen how to use CSS to style a Web Page.
Now I want to introduce you to a different abstraction level of styling pages with CSS, using Tailwind CSS (I’ll also call it simply Tailwind).
Tailwind is a way to apply CSS by using HTML classes.
Instead of writing
<html>
<head>
<style>
p {
color: black;
}
</style>
</head>
<body>
<p>test</p>
</body>
</html>
We’ll use the class attribute on the p tag and we’ll use the class text-black.
<html>
<body>
<p class="text-black">test</p>
</body>
</html>
Do we want the font to be centered? We add text-center:
<p class="text-center text-black">test</p>
text-center sets the CSS rule text-align: center
Want some padding on top? Use pt-10. This sets the CSS property padding-top: 2.5rem to give some spacing on top.
One very simple way to experiment with Tailwind is to use Tailwind Play, it’s a playground where you can experiment with Tailwind.
In Tailwind each class is tied to just one CSS instruction. It does one thing.
What we like about that is we write the style in the HTML directly.
I find that using Tailwind really helps me a lot to design a page, and I’m not alone. Tailwind is becoming more and more popular, and for this reason you’ll likely use it a lot.
💁♂️ TIP: Tailwind is called a “utility framework”. If you already know another framework like Bootstrap, Tailwind is similar but kind of different. Instead of providing you with more CSS classes, like
.containeror.btn-primarythat do not tell you exactly what they do, you have what it’s called utility classes. Like.text-rightor.text-left. They tell you precisely what they do. And they just do one thing. In this case, they move the text to the right or left. This is just an example. There are many more of those classes, each applying a single property of CSS rather than many at once as happens with Bootstrap.
Sure, the HTML gets a bit cluttered by classes, as you can need quite a few of them sometimes. But the benefits are valuable. This is why more and more people jump to using Tailwind and it’s been widely adopted all over the industry.
I think it’s a game changer for designing in the browser. You can easily copy/paste HTML and it automatically gets the proper style.
And one of the main benefits is maintainability. The HTML directly describes the presentation, which is great with components-based UI layout design, which is how we build interfaces with modern frameworks like React.
You can find the Tailwind CSS official documentation at https://tailwindcss.com/docs.
I will NOT repeat all of what that documentation says.
Keep that website in a bookmark, and look up any Tailwind class we’ll use, using the search functionality on the website.
This is the way you’ll learn how to use it.
Start right now by searching text-black and text-center, for example.
Next I will introduce a few useful classes we’re probably going to use.
There are a ton of different properties and values. In this unit I’ll introduce the most common ones to make it easier for you, for everything else refer to the official documentation.
Lessons in this unit:
| 0: | ▶︎ Introduction |
| 1: | Box model properties |
| 2: | Colors |
| 3: | Typography |
| 4: | Flexbox and Grid in Tailwind |
| 5: | Modifiers |
| 6: | Responsive design in Tailwind |