I used to hate Tailwind CSS

Why would I even need it? After all, I love Vanilla CSS so much. and Tailwind is also built upon Vanilla CSS. The first time I saw Tailwind CSS used on a project and seeing so many classes in the HTML file, it had me rolling.

Why Does This Happen?

Yes, now I need to learn yet another framework. At that time, I had already learned HTML, CSS, JavaScript, React, and Next.js. I thought I was done and didn't need to learn anything else (wrong mindset).

When you don’t know anything about a thing, you become scared, and you hate even trying.

I started Googling "why you shouldn't use Tailwind CSS", "how Tailwind CSS is bad", etc. You know what kind of information and videos you can find on Google and YouTube.

Most of the content on that platform is created by people who will do anything for views. Additionally, you don't know the person you're watching or reading. Do they really have experience with development? Are they good developers?

Let's compare Vanilla CSS and Tailwind CSS.

Vanilla CSS

html

Copy

   <main>
        <div className={styles.page}>
          <div className={styles.firstRow}>
            <div className={styles.weatherReport}>
              <div className={styles.climate}>
                <h2 className={styles.city}>{data.location.name}</h2>
                <div className={styles.region}>
                  {data.location.region && (
                    <span>
                      {data.location.region}
                      {" | "}
                    </span>
                  )}
                  {data.location.country && (
                    <span>{data.location.country}</span>
                  )}
                </div>

                <h4 className={styles.current}>Current Weather</h4>
                <div className={styles.localTime}>{formattedDateTime}</div>

normal html in next.js

css

Copy

.page {
  max-width: 1256px;
  margin: auto;
  padding: 10px 10px 80px 10px;
}

.firstRow {
  display: flex;
  width: 100%;
  height: 480px;
  gap: 10px;
}

.weatherReport {
  width: 854px;
  height: 100%;
  border-radius: 16px;
  padding: 20px;
  background-color: #000;

  border: 1px solid rgba(255, 255, 255, 0.24);
}

.city {
  font-size: 36px;
  font-weight: 600;
}

.region {
  margin-top: 6px;
  font-size: 20px;
  font-weight: 300;
  opacity: 0.8;
}

.current {
  margin-top: 36px;
  font-size: 18px;
  font-weight: 600;
}

.localTime {
  font-size: 16px;
  margin-top: 6px;
  opacity: 0.9;
}

normal Vanilla CSS file

Here, I'm using Vanilla CSS. Now there are pros and cons of using it

Pros of Vanilla CSS:

You can clearly see HTML structure.

There is no mess in HTML files with CSS classes.

You have full control, allowing you to style each class as needed.

A separate CSS file for organization.

Cons of Vanilla CSS:

You need to create unique CSS class names for each element, and ensuring they don't match can be frustrating, especially on larger projects with numerous files

When viewing the HTML file, you don’t know which CSS is applied there.

You need to constantly switch to the CSS file to check which styles are applied there.”

You need to create a separate CSS file, which can become quite lengthy, especially in large projects where it may extend to thousands of lines of CSS code.

Tailwind CSS

html

Copy

<main className="px-3 pt-2 ">
        <section className="w-full h-fit flex flex-col gap-2 mx-auto sm:max-w-[640px] lg:max-w-[1024px] lg:flex-row  lg:h-[29rem] xl:max-w-[1280px] xl:h-[30rem]">
          <div className="w-full h-fit p-4 border border-gray-300 dark:border-stone-700 rounded-md lg:h-full lg:w-[40rem] lg:p-5 xl:w-[56rem] lg:rounded-lg xl:rounded-xl">
            <div>
              <h2 className="text-xl font-semibold leading-8 sm:text-3xl xl:text-4xl ">
                {data.location.name}
              </h2>
              <div className="text-sm font-normal leading-tight opacity-90 sm:text-base sm:mt-1 xl:text-lg xl:mt-2">
                {data.location.region && (
                  <span>
                    {data.location.region}
                    {" | "}
                  </span>
                )}
                {data.location.country && <span>{data.location.country}</span>}
              </div>

              <h4 className="mt-5 text-sm font-semibold sm:text-base sm:mt-9 xl:text-lg">
                Current Weather
              </h4>
              <div className="text-xs font-normal opacity-90 leading-5 sm:text-sm  xl:text-base">
                {formattedDateTime}
              </div>

html with Tailwind CSS utility classes in next.js

Here I am using Tailwind CSS, Yes only one file.

Pros of Tailwind CSS:

You don’t need an extra CSS file.

You can clearly see which CSS is applied to each element.

When you add Tailwind to a project, all default HTML styles are automatically removed.

No need to think about what class name to give.

Consistency in style.

Flexible classes; you are not limited to default Tailwind classes. For example, "text-xl" typically means a 20px font size, but you can customize your own sizes, like "text-[69px]". This is just a small example of the many possibilities Tailwind CSS offers.

And most importantly, many companies use Tailwind CSS. In job requirements, many companies require familiarity with it.

Cons of Tailwind CSS

If you add too many Tailwind classes, the HTML file can look overwhelming. (You can use a VS Code extension to hide all the Tailwind classes, allowing you to focus on the HTML structure.)

You need to learn Tailwind CSS 😂.

Both code samples are from my Weather Forecast project. I initially built this project with Vanilla CSS and JavaScript and later built with Tailwind CSS and TypeScript.

Now How to Properly Learn Tailwind CSS

If you've clicked on this blog, you likely already have an idea about Tailwind CSS and may have even tried it by watching YouTube tutorials. However, learning Tailwind CSS from YouTube tutorials is one of the biggest mistakes you can make.

If you're a complete beginner in Tailwind, you can watch tutorials just to grasp the basic idea. However, I highly recommend learning by yourself on your own projects using the Tailwind CSS documentation.

Why? Because I also started learning Tailwind CSS by watching YouTube tutorials, and I understood the basics. However, I couldn't implement it effectively on my own, and the abundance of classes in Tailwind overwhelmed me. Despite learning it, I didn't become proficient, so I didn’t used Tailwind in any of my projects.

Then, one day, I decided to give it another try. This time, I decided to learning it by myself, building projects, and using Tailwind documentation. And you know what? I became very good at it. It became so much easier to use. When you learn and use it yourself, you will understand why Tailwind CSS is the best and why so many people use it.

Here’s how to learn:

Now, if you want to change the background color of a div, go to the Tailwind documentation, search for "background color," and then apply that class.

Similarly, if you want to apply a border, go to the documentation, search for "border," and then use the relevant class.

If you've built 1 or 2 projects with Tailwind CSS completely by yourself, you will become very good at it & It will feel easy and simple, and you will also love it, just like me

Helpful VS Code Extensions

This extension provides auto-completion and suggests Tailwind CSS classes.

This extension enables you to hide all the classes so you can focus on the HTML structure.