Guten Tag!

Many greetings from Ulm, Germany.

I've learned Tailwind CSS only recently and it continues to amaze me. It is surprising how fast it can change the appearance of your website. That’s probably due to the fact that you can get most things done once you understand a couple of Tailwind classes.

It really is an 80/20-type of situation with Tailwind. So today, let me show you the 20% of classes that let you get 80% of the work done.

Change font size

Imagine that you have a div that contains lots of text and you want to change that text’s appearance. Then, the text- family of classes is your friend. For changing the text sizes just combine text- with a size like sm (small), lg (large) or xl. Here’s a list from the Tailwind docs.

The list is actually longer. It goes as far as 9xl. But I think you get the idea. Of course, you can also apply these classes to headings or whatever else that contains text.

Other text- modifiers can be used for

• alignment, e.g. text-left or text-right

• color, e.g. text-green-500.

Font weights

The exact same logic applies to bold texts. If you want to make your font bold, then you just have to increase its font weight. Here’s how that looks in Tailwind.

Height and widths

Often, you want to change the height and width of div containers. This can be done with the w- and h- classes (I think you can guess which one changes what. ) By the same logic as before, you can connect these with a level (in this case numbers). For example:

By now this pattern is probably getting boring. So let me show you some other cool stuff you can do with these:

That’s right! You don’t have to hard-code the widths and heights. You can make them dependent on a div's surrounding. The exact same pattern can be used for max-width, min-width, max-height, and min-height.

Margins and paddings

Probably the most annoying part about CSS is having to write margin-left, margin-right, padding-top, etc. It’s just so much typing to position your div containers in the right way.

Tailwind alleviates this problem by using the short-hand classes ml, mr, mt and mb (This changes margins. For paddings replace m by p ). Combine these with a number (like before) and you got a fast way to arrange your divs.

But the best part is that there is also mx and my that combines margins.

And the even better part? When your div is in a flex container, then you can use mx-auto and my-auto such that your div will be automatically centered. If you find centering a div as painful as I do, then you know how great this is 🥳 

This concludes this week’s 3MW. I hope you enjoyed this week’s issue and I wish you a great week! 🙃 

In the subscribers-only part, we talk about how to combine these classes into components so that we do not have to repeat ourselves all the time.

Subscribe to Premium to read the rest.