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 😃
Top comments (11)
How can you tell if you actually know tailwind? I agree that it enhances your CSS skills, but I see myself keep on going back to the tailwind documentation to see if I am writing the code correctly. Like, is it correct for me to put "Tailwind CSS" as a skill in my resume?
Well, knowing or should I say mastering Tailwind can only be as a result of you using it daily. And yeah it's fine to head to the docs every now and then to figure out the classes you want to use for a particular style you want. There is an extension that also makes the job easier though, such that you don't have to head back to the docs.
And then finally, I don't recommend adding Tailwind as a skill in your resume, though I'm not an expert in getting jobs, but I can tell you that if I was a recruiter I'd rather love to see CSS as a skill rather than TailwindCSS.
This is because I know that even though you don't know Tailwind, as long as you know CSS, you can always use it.
If you think Tailwind as a replacement for CSS, you'll somehow hate it at some point. If we think Tailwind as another CSS framework to get job done faster, you might enjoy using it more than you think. The tricky part is you'll feel guilty when using it because not learning vanilla CSS properly, which might hurt you when switching to projects not using tailwind.
IMO Tailwind made enhanced my CSS skills. When I was using component based frameworks like Bootstrap, I felt like I had to Google CSS more often. Plus, if a feature wasn't included in the framework, it felt wrong. With Tailwind, CSS feels natural.
Yeah, using Tailwind to me feels like I'm actually using vanilla CSS.
Also thanks for sharing your experience.
Nice article, well done.
I agree with you, tailwindcss isn’t a framework you spend days learning, you can go over it in 3-4hrs then pick a project to work with it.
I just dabbled into it and presently building my first project with it. It’s a cool framework.
Absolutely Eniola.
It's an awesome framework. And the more you build projects with it, the more it sticks with you.
Thank you for sharing this!
You're welcome.
I'm glad you liked it
Great article. I myself advise so many people not to look at courses for stuff like tailwind and typescript. You really need to use them to learn them.
Exactly