3MW (Skip regular CSS, go straight to Tailwind CSS)

Guten Tag!

Many greetings from Essen, Germany. (My PhD endeavors require me to be in the German Pott this week).

This week, I’ll try to convert you to Tailwind CSS which is a special form of CSS, the language for styling things on the Internet (the Internet’s cosmetics if you will).

I can’t even use regular CSS, why would I use Tailwind CSS?

So, why would I try to convince you to use a special kind of CSS? The short answer is that Tailwind is easier to learn and makes styling things faster. Especially if you’re a total CSS amateur.

Ok, fine. So how does this magical Tailwind stuff work?

Last week, I’ve shown you that CSS code usually targets classes to style them according to some commands. We used this to overwrite styles of elements of a given class.

This boiled down to finding a wild combination of class names like .irs--shiny .irs-from, .irs--shiny .irs-to, .irs--shiny .irs-single and change the corresponding styling rules.

That’s how typical CSS works. But Tailwind CSS comes with a different approach. It comes with maaany pre-defined small classes like font-bold and text-green-500. (I think you can guess what these classes do)

By combining as many pre-defined classes as you like, you can construct beautiful design. Since the naming of the classes follows a sensible naming convention, it’s actually not that hard to remember the correct utility classes that you need.

And with the right coding tools, you can always find the right utility class for you or lookup what e.g. text-green-500 does (in case you forget).

I’m still a bit fuzzy on how this Tailwind stuff works…

Alright, I get it. My explanations are not very detailed. So maybe try this condensed 100 second break-down from Fireship.

Cool, cool, cool. So there are many small classes that I can combine. Is this really any better than regular CSS?

I know that these small classes do not really sound like much of an improvement. But the naming convention alone makes it possible to remember the correct CSS code for what you actually want to do.

Still don’t believe me that Tailwind is fast? Then have a look how this video sets up a beautiful landing page in real time.

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

In the subscribers-only part, I’ll help you set up VSCode so that you can use the best tools to play around with Tailwind CSS too.

Subscribe to 5 Minutes Wednesdays to read the rest.