Tailwind CSS: A Beginner's Guide

What is Tailwind CSS?

Adnan Pasha's photo
Adnan Pasha
·

2 min read

Tailwind is a utility first CSS framework that provides low level utility classes. these classes handle margin, padding, colors, fonts and other CSS properties directly in your HTML elements, making styling fast and customizable. Unlike frameworks like Bootstrap, Tailwind gives you more control over design without dictating the layout.

Setting Up Tailwind CSS
I have worked with multiple projects where setting up Tailwind was incredibly simple. To get started in any React project, I used the following steps:

  1. npm install -D tailwindcss postcss autoprefixer

  2. npx tailwindcss init

Example: Building a Responsive Card, Here’s how I created a responsive card component:

<div class="flex justify-center items-center h-screen"> <div class="bg-white p-8 rounded-lg shadow-md w-96"> <h2 class="text-2xl font-bold text-center text-blue-500">Welcome to Tailwind</h2> <p class="text-gray-700 mt-4">This is a simple card layout styled using Tailwind CSS.</p> </div> </div>

This was built entirely with utility classes, no need for custom CSS, just a few predefined classes for spacing, colors, and shadows

Pros of Tailwind CSS

  • Fast Styling: I can build a complete UI quickly with predefined utility classes, making development more efficient

  • Customizable: You can configure Tailwind to fit your style guide by adjusting spacing, colors etc

  • Responsive Design: Tailwind’s responsive utilities make it easy to create mobile friendly designs by adding classes like md: and lg:

Cons of Tailwind CSS

  • Verbose HTML: The classes in the HTML can get very long, especially with complex layouts

  • Learning Curve: If you are used to writing custom CSS or using other frameworks, getting used to utility first CSS can take a little time

  • No pre-built components: Unlike other frameworks like Bootstrap, you will need to build most components yourself

Conclusion
After using Tailwind for few projects, I found it not only simplified CSS but also sped up development. It’s a great tool if you are looking for a flexible customizable way to style your projects quickly

Tailwind CSStailwindstylestyling