My articles are aimed at those people just starting out on their webdev journey, I am myself a Jr WebDev, aged 42, remember you are never too old to learn how to code. I want to share with you the things I have learnt along the way and wish someone had taught me at the very beginning of my journey.
I’m going to put my neck on the line and say the quickest way to learn CSS is by using Tailwind.
“quickest way to learn CSS is by using Tailwind”
There you go it's out there, I have said it, I’m prepared for the barrage of negative comments! But before you shoot me down let me explain.
Learn CSS Before Tailwind.
What the hell are you on about Trig you just said use Tailwind to learn CSS!!!
I did but you need to understand the basic mechanics of CSS, so spend an afternoon working through a couple of examples and watching a few youtube videos. Then move straight to Tailwind.
What is Tailwind
“Tailwind CSS is basically a utility-first CSS framework for rapidly building custom user interfaces.”
In English, this means, that we no longer need bloated style.css sheets with ridiculous name conventions. We can instead style our application directly in our HTML code with simplified style names. Let's look at an example:
<p> my name is trig </p>Using traditional CSS:
p {
color: red;
background-color: black;
text-transform: uppercase;
padding: 1.25rem;
font-weight: bold;
}
Using Tailwind:
<p class="text-red-500 bg-black uppercase p-5 font-bold"> my name is trig </p>How cool is that? Still, need convincing?
Tailwind Benefits
- No more un-manageable class names and IDs. No matter how structured my projects start inevitably you will need to make changes. Those class names that worked for you in phase one become meaningless in phases 2, 3 etc. With tailwind you no longer need to think or stress about naming conventions, you directly style the HTML element, as a Junior Developer this is much more intuitive as you can see on screen the changes you are making and what is happening.
- Speed and Efficiency. Tailwind is fast. You no longer have to bounce between giant CSS sheets and HTML. We all know the pain of making a change in CSS, having to scroll down the page to see if you need to change something in a media query. With Tailwind everything you need is in one element. Say you wanted to change your background colour at 1024px to achieve this in CSS you would do:
@media only screen and (min-width: 1024px) {
p {
background-color: red;
}
}In Tailwind, we can simply use lg: which is a predefined breakpoint for a 1024px screen.
<p class="bg-black lg:bg-red"> my name is trig </p>3. Easy To Learn. Fact! Tailwind is easy to learn.
4. It Will Teach You CSS. Yes, it will! Fundamentally Tailwind is using CSS, the class names are not that distant from normal CSS but because you are building at speed, you will get more exposure to styling. It's almost pre-school in its approach in that you can see immediately on screen and in dev tools what element you are styling and what effect that is having.
Do Employers Want CSS or Tailwind?
Employers want someone that can demonstrate their skills in building websites and applications, that your codebase is readable, and that you have found a solution to a specific problem. Will employers mind that you have used Tailwind over CSS I would say no. I think most businesses looking for Web Developers are more interested in your use of JavaScript.
Of course, if you are applying for a very specific Frontend Role that focuses on styling OR that is the area you want to be working in then of course you should take the time to learn CSS.
I’m going to be writing some Tailwind tutorials going forward, so if you would like to learn more about this awesome framework then please give me a follow.
Summary
In this article, I touched on my opinion of Tailwind and how it can teach you CSS. I appreciate this article goes against the grain of most others out there but I have personally seen my CSS skills grow faster whilst using Tailwind. It's also worth bearing in mind that a lot of literature out there is talking about Version 1 and 2 of Tailwind but Version 3 has recently been released resolving a lot of the negative comments I have read about it. In the end, it's up to you to make a decision, but I do not see Tailwind negatively impacting your progress as a developer in any way.
Final Note From Me
I’m sharing my experiences from the point of view of a Jr Dev with others on a similar level. These are the lessons I have learnt that I wish someone had told me about when I first started learning Web Development.
If you liked this article and want to treat me then please buy me a coffee, the caffeine will help me stay awake long enough to write more content:
Otherwise, I’d be equally as pleased if you gave this article a clap 👏 and followed me so we can continue our journey to Senior Dev together. 👍
