Introduction

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.

Syntax

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">
 Submit
</div>

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.

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.

• Get started with Tailwind CSS
• Learn Tailwind CSS: a beginners guide
• Tailwind CSS tutorial. A very hands-on approach to styling web applications
• Tailwind CSS for Absolute Beginners
• Get started with Tailwind CSS in 15 minutes
• Tailwind CSS tutorial - Learn how to build websites using a utility-first CSS framework

Advantages

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

Disadvantages

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

TailwindPLAY

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!!

Conclusion

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!