I have visited many websites, some responsive (user-friendly), some attractive, and some built without certain specifics, thereby not giving the website the feel it deserves. I have learned that this is a result of the lack of easy applications of the styling components by most developers. Mostly not because they're not experienced, but because many components and concepts cannot be easily fetched and applied with just vanilla CSS. Trust me, as a fan of beautiful and responsive websites, it breaks my heart to see some websites look the way they are when these loopholes can be easily addressed.

Wait, what is Vanilla CSS? Vanilla CSS is simply writing pure css codes in your project without adding any other library or framework related to CSS. Don't let the name stress you so much.

In this article, I will be giving good and step-to-step features and edge Tailwindcss gives over Vanilla Css and the features that most developers have been lacking. Fun right? Then grab your coffee, get your research minds ready, and let's do this!

Why Tailwind CSS?

Yes, I know the first question that might be budding in your mind is "Why even talk about Tailwind CSS?" either as a newbie or not. Tailwind CSS is a CSS framework that allows for the easy application of styles in your project as a front-end developer. The interesting part is that there is no need to create an external file to apply Tailwind, all you do is write your styles inside your HTML elements. In other words, it can also be referred to as inline styling.

A framework, web development concerned, is a set of already-made and pre-designed set of tools, libraries, and components to be added to your project to provide ease and a different unique feel when hovering around the website. Hence, Tailwind CSS is a utility-first CSS Framework and this means that Tailwind provides a large set of small utility classes you can add to your HTML elements, to provide ease and quick access.

Compared to Vanilla CSS where you have to create an external file or even open a new style tag to make your work from being crowded by calling a "background-color" every single time you need that function in your work, in tailwind css, you can easily call such function as "bg-" along with any color you wish to be appointed along with it. Remember, "small utility classes". To name a few:

Padding goes for "p"
Padding-top goes for "pt"
Line-height goes for "leading"
Width goes for "w"
Margin goes for (Yes, you guessed right) "m"

Let me write a small code snippet to show you how Tailwind works. You can copy the code to try it out later;

<div class="text-center pt-5 text-xl">
    <p>This is a simple text with the text centered, a padding-top of 20px,
      and a font-size of 20px, respectively.
    </p>
</div>

Note: In calculating the padding in tailwind css, each number starting from 1 represents 4px. As a result, pt-5 becomes padding-top of 20px.

Installing Tailwind CSS to your Project

Installing tailwind is another simple and quick benefit of using this framework. For a person that is not yet aware and conversant with the command line interface, you can just add the play CDN(Content Delivery Network) to your work. This will help your development purpose faster.

The play CDN is to be added within the <head> tag of your project:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold underline">
     Start your Tailwind Project!
  </h1>
</body>
</html>

If you are quite aware of the command line interface or you are not but you do wish to explore, you can check out this video. It gives a step-by-step guide on how to install tailwind css using the CLI.

https://www.youtube.com/watch?v=250R45w2xuQ

Lastly, before this article comes to an end, let us look closely at the benefits of using Tailwind CSS in your projects and also acquiring it as one of your major skills.

Benefits of Tailwind CSS

Using tailwind css has many benefits, amongst many, I'll be discussing a few with you.

As a developer, acquiring tailwind css as one of your skills will set you up in the tech space because most tech companies out there are not looking for individuals with limited skills. Knowing how to use tailwind css simply means that you can explore and do things beyond the usual.
Tailwind helps to write neat codes.
When your code has been published, tailwind enhances the readability of your codes quite easily and faster for better understanding. This is because since you have your styles in your HTML element, whoever is reading your code will be able to know whatever it is you are trying to achieve immediately.
Tailwind css can be added to many other frameworks like react, angular js, vite, Laravel, NextJs, etc.

Also, you can customize your configuration with your own design choices. For instance, if you want to import a particular type of color that is not part of the Tailwind color library, you can easily customize it on your own too. Check out the code snippet below on how to achieve that:

  <!doctype html>
  <html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              'carrot': '#e67e22',
            }
          }
        }
      }
    </script>
  </head>
  <body>
    <h1 class="text-3xl font-bold underline text-carrot">
      Hello, world!
    </h1>
  </body>
  </html>

All that was done here is editing the tailwind.config.js to suit the project, hence giving the <h1> a different color, named "carrot". There is a whole lot more that you can do with the configuration, like changing the font family, changing the width pixels, and many more.

I will be sharing two of my projects I built with tailwind css along with the git repository so that you can also go through the codes! Click on the links to get your minds blown!

Easybank Landing Page

Live URL: https://easybank-clonesite.netlify.app/

Git repo: https://github.com/theCephas/Easybank-Landing-Page
Bankist Bank Landing Page

Live URL: https://bankist-clone.vercel.app/

Git repo: https://github.com/theCephas/bankist-clone

I do hope you find those two resources useful.

SUMMARY

To summarize all that was said in this article, read the following outline:

We discussed the meaning of Vanilla CSS, that it means just writing pure css codes.
We had a discourse on whether developers should choose tailwind css because of its easy scalability and much more or resort to vanilla css along with its complex process of application.
We treated how to also install tailwind css into our projects.
We had a discourse on the benefits of tailwind css as developers and as an acquired skill.
And then, I shared some of the projects I built with tailwind css! Cool right!
If you feel convinced and choose to explore more on tailwind CSS, you can check out their doc here.

Thank you for taking the time to read this article! I am grateful. You can as well share comments if this article helped you as well. Happy Coding!

The Edge Tailwind CSS has over Vanilla CSS

Table of contents

Why Tailwind CSS?

Installing Tailwind CSS to your Project

Benefits of Tailwind CSS

SUMMARY

Subscribe to my newsletter

Osho Iseoluwa

Osho Iseoluwa