Tailing Tailwind CSS

Tailing Tailwind CSS

You might never go Vanilla CSS again!


As we probably know, Vanilla CSS is quite challenging and designing with it is a series of endless frustration and pain. Then frameworks were created to make coding easier, security, efficiency, maintainability and code writing quickly.

There are so many CSS frameworks that have been created over the years but the most popular one is Bootstrap, which has been widely used and is beloved by many developers. But what of Tailwind CSS? What is it, is it easier or better than Bootstrap and is it worth studying?

What is Tailwind CSS?

A utility-first CSS framework which provides classes and tools that lets you easily get started styling your website or application as opposed to other CSS frameworks like Bootstrap or Materialize CSS that provide predefined components. Tailwind CSS is not opinionated and let’s you create you own unique design without a hassle.

Utility classes means adding those class names on your HTML markups will help you get a lot of minor things done without actually writing a single line of CSS yourself.

What makes it different?

The main difference between Tailwind CSS and Bootstrap is that Tailwind CSS is not a UI kit and doesn't have a default theme or built-in UI components. Instead, it comes with predesigned widgets you can use to build your site from scratch.


What I love most about Tailwind CSS is that it offers thousands of built-in classes that do not require you to create designs from scratch. For example, the Vanilla CSS way of centering a div uses this code πŸ‘‡πŸ½

.btn {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;

With Tailwind CSS, there is no need to have class names! Yes, you read right. Instead, we are going to write our styles directly in our HTML code which is much faster and shorter, like this πŸ‘‡πŸ½

<div class="flex justify-centre items-centre h-screen">

Impressive, huh? Again let's say you struggle with designing a good looking box-shadow for the button, with Tailwind, instead of typing box-shadow: 2px 2px 5px gray, you simply πŸ‘‡πŸ½

// card component
<div class="shadow-md">Submit</div>

And let Tailwind do its thing. You can even check out the button here and make changes yourself.

Where to learn Tailwind CSS?

Directly from the official Tailwind CSS documentation: tailwindcss.com.

Screenshot 2021-10-16 180910.png

Otherwise, here are some of the top 3 YouTube tutorials you can use!

  • Traversy Media
    Look at the TailwindCSS utility framework including what it is, setup and creating custom components with utilities. Start learning

  • The Net Ninja
    In this tailwind css tutorial, take a look at what tailwind css is, how to use it & set up a new project. ‍Learn now

  • Scrimba
    Learn Tailwind CSS with Victor Gonzalez Full interactive course on Scrimba while building a project. ‍Begin now!

Article tutorials

If your learning style is more of reading than watching videos, here is a list of article tutorials to check out.


Although I favour Tailwind CSS, there are some pros and cons that follow:

  • Control Over Styling
  • Increase in performance, consistency, and productivity
  • Easy to maintain and customise code
  • Responsiveness and Security
  • Faster CSS Styling Process
  • No opinionated styles result in no need to override code


  • Creating complex animations is complicated
  • Code readability, as it uses 'inline CSS' format
  • Small community


Now that you have the resources, you have to practise what you are learning to grow your knowledge and skill. TailwindPLAY is an online platform that is perfect for practising and learning how the framework works, prototyping a new idea, or creating a demo to share online.

You can even make changes to my upload image component project to get the feel of Tailwind CSS!!


Now you have some insight Tailwind CSS, what it is, how its written and how its different.

Tailwind CSS does not define the way your component looks. You define that by combining several classes together since it doesn't come with premade responsive UI components.

I love Vanilla CSS and would choose it every time, but Tailwind CSS can help speed up your coding process and save time. Learn Tailwind CSS and make writing CSS code easier and less frustrating!