Intro into Tailwind CSS

#webdev #tailwindcss #learning

If you’ve ever built a website, you know that styling can sometimes be tedious, repetitive, and time-consuming. You write CSS rules, try to manage class names, and occasionally find yourself rewriting the same code over and over. That’s where Tailwind CSS comes in! Tailwind is a popular utility-first CSS framework that helps you build clean, modern, and fully responsive designs without the headache of traditional CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework where each class performs a single function. Rather than writing custom CSS, you use a large set of pre-defined utility classes directly in your HTML. This approach speeds up the design process by making it easy to apply styles and allowing you to focus on the layout and feel of your website, rather than writing custom CSS from scratch.

Why Choose Tailwind CSS?

Here are three standout features that I found that make Tailwind CSS cool and effective for both beginners and experienced developers alike:

Highly Customizable Utility Classes
Responsive Design Made Simple
Rapid Prototyping with Minimal CSS

Customizable Utility Classes

Tailwind offers a comprehensive set of pre-defined utility classes, from padding and margin to font size, color, and grid layouts. Tailwind is designed to be flexible and customizable; you can easily adjust classes to suit your design needs or even configure the framework itself to include your unique styles and preferences.

Below, I apply padding using p-6, set background to white using bg-white and apply rounded corners and shadow with rounded-lg and shadow-lg.

<div class="bg-white p-6 m-10 max-w-sm rounded-lg shadow-lg border border-gray-200">
  <h2 class="text-xl font-semibold text-gray-800">Product Card</h2>
  <p class="mt-4 text-gray-600">This is a simple product card with customizable styles.</p>
  <button class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
    Buy Now
  </button>
</div>

If I wanted to customize those predefined classes, I could go into my tailwind.config.js to do it!

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        customBlue: '#007ACC',
      },
      borderRadius: {
        'xl': '1.5rem',
      },
    },
  },
};

<button class="mt-4 px-4 py-2 bg-customBlue text-white rounded-xl hover:bg-blue-600">
  Buy Now
</button>

Simplistic Responsive Design

Tailwind makes it easy to build responsive websites without writing custom media queries. Each utility class can be tailored to specific screen sizes by using prefixes like sm:, md:, lg:, and xl:. This structure makes it easy to create layouts that adapt seamlessly across devices, providing a better user experience with minimal effort.
Here I have have an example of how I would create 3 'cards' to dynamically change size depending on the screen size. grid-cols-1 creates only 1 column on small screens, md:grid-cols-2 changes it to 2 columns on medium screens, and lg:grid-cols-3 changes it to 3 columns on large ones!

<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
  <div class="bg-white p-6 rounded-lg shadow-md">
    <h3 class="text-lg font-semibold">Apple</h3>
    <p class="mt-2 text-gray-600">Keeps the doctor away!</p>
  </div>
  <div class="bg-white p-6 rounded-lg shadow-md">
    <h3 class="text-lg font-semibold">Mango</h3>
    <p class="mt-2 text-gray-600">My favorite fruit</p>
  </div>
  <div class="bg-white p-6 rounded-lg shadow-md">
    <h3 class="text-lg font-semibold">Banana</h3>
    <p class="mt-2 text-gray-600">Are good when they're yellow!</p>
  </div>
</div>

Rapid Prototyping

With Tailwind, you can quickly create polished prototypes directly in HTML, saving you time and allowing you to focus on the design and functionality of your app. This utility-based approach means less time writing custom CSS, which ultimately leads to faster project delivery. Since you can see the effects of each class immediately, it’s perfect for experimentation and refinement.

Below, I can set a background color for nav bar using bg-gray-800, flex, justify-between, and items-center create a flexible, centered layout, and md:hidden hides the menu button on medium screens and up, while md:flex displays the navigation links on medium screens and up.

<nav class="bg-gray-800 p-4 text-white">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-2xl font-bold">Brand</a>
    <ul class="hidden md:flex space-x-4">
      <li><a href="#" class="hover:text-gray-300">Home</a></li>
      <li><a href="#" class="hover:text-gray-300">About</a></li>
      <li><a href="#" class="hover:text-gray-300">Services</a></li>
      <li><a href="#" class="hover:text-gray-300">Contact</a></li>
    </ul>
    <button class="md:hidden bg-gray-700 p-2 rounded">Menu</button>
  </div>
</nav>

Conclusion

To wrap things up, trying out Tailwind CSS as a new developer has been a game-changer for me. Compared to libraries like MUI or Chakra, which give you ready-made components, Tailwind’s utility-first approach feels liberating. I can build exactly what I envision directly in my HTML without having to dig through pre-styled components or worry about overriding defaults. At first, using so many classes in my HTML felt unusual, but it quickly made sense as I saw how fast I could style and adapt layouts without writing new CSS.

Tailwind’s responsive utilities make it super easy to understand and build for different screen sizes, and prototyping is a breeze—I can experiment and adjust quickly without hopping between files. While MUI and Chakra are fantastic for projects that need polished components out of the box, Tailwind has been invaluable for learning the nuts and bolts of responsive design and building my own styles from scratch.

Overall, Tailwind has been overall, a fantastic experience for me so far. The only difficulties I faced were having to learn Tailwind metrics and keywords. If you’re looking to learn more about styling or want to create layouts with your unique style, Tailwind CSS is definitely worth exploring!