You Don't Need To Learn TailwindCSS To Use It

A few months back, I wrote an article on when to learn React, now in this article, I'm going to do something similar on TailwindCSS/Tailwind only that it's "using" rather than "learning" because you don't need to learn Tailwind.

I decided to write this article like a week ago because of how easy I discovered using Tailwind was for me, even though I didn't learn anything about it. I was only contributing to an open-source project for Hacktoberfest.

The project uses Tailwind, and though I liked using vanilla CSS, I just had to go with the project. And believe me when I tell you, it was as easy as "a walk in the park", unless walking in the park is not easy for you. Hmmm 🤔

Tailwind is a very useful framework for CSS developers, but some developers I have seen tend to have the wrong idea of the framework. Tailwind is not a framework for learning CSS, and neither does it improve your knowledge or understanding of CSS all by itself.

Hey, don't be quick now to jump to the comment section to say "I disagree with you, Tailwind helped me understand CSS better". Allow me to explain further first, ok. Let's all learn something new together.

And also, as I mentioned in a similar article for React, this isn't an article that discourages you from using Tailwind or other CSS frameworks, rather it's an article that hopes to explain what Tailwind is, when to use it, and how to use it. So sit back, relax, and enjoy this walk in the park.

What is Tailwind

Tailwind is a utility-first CSS framework that makes using CSS better. So rather than using semantic classes along with a stylesheet file, you simply use single-purpose classes.

Now what this means is this, a traditional HTML file for a simple webpage could be

<style>
  .desc {
    padding: 15px;
    border: 2px solid red;
  }
  .subtitle {
    color: gray;
  }
</style>
<p class="desc">This is the description of the page</p>
<h1>Hello World</h1>
<p class="subtitle">This is a subtitle</p>

So the styles of the desc class are only applied to the p element, right? But with Tailwind, it gets better

<p class="p-4 border-2 border-solid border-red-900">
  This is the description of the page
</p>
<h1>Hello World</h1>
<p class="text-gray-900">This is a subtitle</p>

All the styles we applied on the first example - padding, border, and color - have been applied on the second example without you directly using CSS.

So you can apply flex to an element just by specifying a class that is a style declaration in a global style file provided by Tailwind. The same thing goes for transition (for animations), border-radius, and so much more.

Every style you could ever need has been provided as a class for you to just plug into your HTML file. This alone can make working with CSS 10 times easier for you.

And another cool thing about Tailwind is that unlike JavaScript frameworks (like React), Tailwind is not limited to some projects only, or rather not "most suitable" for some projects. Using Tailwind spans from using it on a simple personal project to a scaling web application.

How to use Tailwind

As this subtitle suggests, you don't learn Tailwind, you just use it. A lot of developers may not want to agree with me, but it's true.

Think about it: there is nothing to learn in Tailwind other than how to set it up for your project.

If you should find yourself learning Tailwind, then you are not really learning Tailwind rather you're learning CSS. I'll explain how this is possible in a moment.

But before any Tailwind, try as much as possible to learn the basics of CSS well. Because the thing is, here is a tool that makes using another tool easier for you, but if you don't understand or know how the primary tool works, you'll struggle.

For example, a product designer who understands product designing and stuff will never struggle using any other design tool than what he/she is used to. It may take time for him/her to fully adapt to the new workstation, but it comes eventually.

The way I use Tailwind is what I'd recommend for every beginner I meet because funnily enough there is hardly a CSS developer who understands how to use CSS that will struggle with using Tailwind.

Here is how it works for me, say I need to create an element with spaces between the content(s) and the container of the element, I would simply go ahead to Tailwind docs to get the possible classes for padding. Because what I need is padding right? Not margin!

Now how do I know exactly what I need to get the job done? I have understood the basics of vanilla CSS.

The same thing goes for creating a hover effect on a button, I just head on to Tailwind's docs to see the available classes for hovering, or better still how to apply hover effects with Tailwind.

So in summary, since I know what I want to do in CSS, then I seek to know how to apply what I need with Tailwind. With time I will not need to go to the Tailwind docs to see how to apply padding or any other styles in CSS, because by then I'd have gotten used to the ones I use most frequently.

That's why I don't recommend trying to learn/memorize Tailwind classes - py, px, rounded, and others. It's a total waste of time.

These classes will only stick to you if you've built tons of projects with them, you don't have to memorize them.

Besides, there is a cool VSCode extension that autocompletes these class names without you going to the docs.

So if you're a beginner in CSS, and you want to jump into Tailwind, I'd recommend you practice what you know in CSS first, build like two to three simple projects with CSS, then build projects using Tailwind.

You need to be able to know what you want to style, and then at least have an idea of how you would style the element using vanilla CSS, and then styling it with TailwindCSS would be easier.

Conclusion

Does Tailwind improve your CSS knowledge?

In my opinion, Tailwind doesn't improve your knowledge or understanding of CSS, only you do that. Here is how:

When you apply a style to an element with Tailwind, most of the interactions you do with that element's style are in CSS, you'll see how it was written in CSS by Tailwind and you could even make some changes in the browser, and as such you're improving yourself in CSS.

But all these are through Tailwind, so you can decide to give the credit to Tailwind. But let me know what you think about Tailwind in the comment section. Share your experience, because this has been mine.

Alright thanks for reading, if you like this article follow me and hit the like button for more, you can hit me up on Twitter @elijahtrillionz. You can also support me by buying this young man a coffee that's if you think I deserve one 😃