Tailwind vs CSS: The Twitter Drama 🍿

Hey friend,

Last week, I asked you if you thought creating a React Server Components Course was a good idea and 90% of you said 'Heck yeah' 💪. Thank you so much for your feedback. I have been working hard on the content and it's almost done.

If you want to be part of the Testing Squad and give me feedback, please click this button:

Add me to the Test Squad

Being part of the Test squad would mean you will get access to the Course before everyone else, and if you find any issues, you need to let me know. Thank you, you are the best! 💖

Frontend Gossip 🙈

ICYMI, last week, there was a lot of drama on Twitter where a Tailwind fan tweeted how large classes can be broken down into smaller lines. Tailwind's creator defended the argument, leading to a huge Tailwind vs CSS battle between Tailwind fans vs pure CSS fans 🥊.

Hence, Today, we will talk about Tailwind's Pros and Cons.

Our Weekly Snack: Tailwind CSS

Let's say we were building a Sneaker store like the below image. This means, we need a Card component.

Here is a quick diagram,

👉 Here is the code in the Tailwind Playground for the above Components

Let's build the above Card using Tailwind,

Now, our card will have an image, title, location, price and a button.

Caption

You may have to zoom in or download the image but you can see what we want to build.

In the above image, you can see examples of utilities such as scale-105, py-10 and the code for the Card component. `scale-105, py-10` have a bunch of CSS code and you can think of these as tiny components which do a lot more with CSS.

Next, look at how we have built the Card component. Now that we see it, I know what you are thinking 😅.

It looks ugly and you hate it already before genuinely giving it a shot.

Pro of Tailwind 👏:

Comes with a bunch of utilities that allow us to write CSS rapidly
Utilities combine a few properties, so you write less code
Tailwind comes with a design system, i.e. it will come with a list of colours, spacing, etc. defined so you can use what it has and don't have to come up with magic numbers

Cons of Tailwind ❌:

Your HTML is now flooded with so many properties that it becomes unreadable
It can get harder to debug if you leave the properties in there

I wouldn't say I liked Tailwind for the reasons mentioned above.

But once you figure out the design system behind Tailwind, you will move faster. I can rapidly prototype landing pages like these.

You will find that you don't need to come up with random class names and call everything a container 😅. We are all guilty of it.

Keep an Open Mind 🧘🏽‍♀️

It would be best if you kept an open mind about it. You will have a more challenging time if you don't extract the repeatable code into Tailwind or React components.

I'm a fan but I want you to give it a shot first.

I have a Youtube video for you if you're going to compare CSS and Tailwind.

Weekly Youtube Videos 💖

I have a new video on my channel

5 ways you can level up as a developer in 2023

Check it out and subscribe to my channel for more content related to Frontend, Leadership and Career Development. 💪

Pick Next week’s Newsletter Topic.

You read this newsletter weekly. Hence, now you have complete control over deciding what topic I should cover in next week’s newsletter.

Pick a topic

The Frontend Developers Toolbox 🧰

Coggle Simple Collaborative Mind Maps & Flow Charts
PicoCSS Minimal CSS Framework for semantic HTML, an alternative to Tailwind
State of React Native Survey Take the State of React Native survey

I hope you have a great day!