3MW (The most common Tailwind CSS classes)
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
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.
text- modifiers can be used for
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
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
Margins and paddings
Probably the most annoying part about CSS is having to write
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
mb (This changes margins. For paddings replace
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
my that combines margins.
And the even better part? When your
div is in a
flex container, then you can use
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 5 Minutes Wednesdays to read the rest.
Become a paying subscriber of 5 Minutes Wednesdays to get access to this post and other subscriber-only content.
Already a paying subscriber? Sign In