[Beginner] Tailwind quick Introduction and Review

Unlike most people, I got COVID this Xmas. (ye... pretty sad)

So instead of going on a holiday, I stayed at home and learned a new skill instead 😂 Which is Tailwind -- a very popular tool in Front-End dev for conveniently creating streamlined, uniformed style for your web application.

Here is what I have discovered:

1. Tailwind is NOT that hard!

Basically, it only takes 3 steps to get into it:
-> Install Tailwind packages
-> Set up (do some config)
-> Use Tailwind instantly via className or define style in CSS file using Tailwind syntax

I did say it's convenient because we can define style for any HTML element directly from the className and Tailwind will do its magic with the styling!

You can get a really good crash course from Fireship here: https://www.youtube.com/watch?v=pfaSUYaSgRo

2. An advantage only available in Tailwind

is that it provide a uniform way to apply style, removing the naming step with conventional CSS. If you have written several personal apps like me, you must at least once go back to one of them and wonder "what styles does this introduction className specify...?"

Want to use display: block? just put block in the className.
Want to use font-weight: 600? just put font-semibold in the className.
You get the idea.

And styles can be defined in JavaScript code (if you prefer) so you don't have to open 2 tabs JavaScript and CSS at once :)

3. Easy to use/transition

If you already use CSS a lot, transitioning to Tailwind is simple learning the abbreviation of the CSS you've been using. For example, margin-left: auto will be ml-auto.

Tailwind does provide some support by suggesting its abbreviation thing as you type. So don't stress if you don't know anything. Besides, we also have ChatGPT at our disposal 😎

CSS style reminder when hovering over:

Tailwind hint:

4. Lots of room for customization

... and still keep it uniform for easy maintenance.

You can define your own color palette, primary, secondary, text colors in the tailwind.config.json. See image. Here, I custom the primary color and even add dark mode of the primary color if dark mode is activated.

Line 13 is where I extend the opacity 10% version of the primary color. Meaning to use it for text, I can type "text-primary-10". Simple right?

5. Dark mode support

Oh I haven't talked about Tailwind dark mode support, have I?

From line 6 in the image above, if you set darkMode: "class" in tailwind.config.json (a popular way to do it), then to switch your Tailwind style to darkmode, just add dark: before any style. For example, dark:bg-black - black background for dark theme.

I'm a fan of dark mode so I love this feature a lot.

6. Self-Optimise for Production

When you run npm run build, Tailwind will go through your specified files, identify which styles are actually used, and remove the rest. So, no room is wasted in production.

Final words

In summary, Tailwind is an extremely powerful tool to know and it will definitely provide great accumulative value in the long run. It takes me only ~2 days to understand, use and implement on one of my running app.

So if you have some free time, Learn it! It's worth it.

ps: this Fireship video also summarizes many of my ideas said above. Thought I should share it too.