Tailwind.css has grown in popularity and has been the go-to CSS framework for a couple of years now. The utility framework allows for quick and easy styling and is very flexible. Though it is a fairly easy framework to learn, it can be a little overwhelming at times. Here are 3 tips you can utilize when using Tailwind for your projects.

Define Global Styles At the Beginning of A Project

This is especially helpful if you have a prototype for reference. Any good UX/UI prototype will have clear typography, buttons, inputs, and more. Define them in your project's CSS file under the base layer like this:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    h1 {
        @apply text-3xl font-black font-serif text-pink-400;
    }

    h2 {
        @apply text-2xl font-semibold text-cyan-500;
    }

    button {
        @apply text-cyan-500 bg-pink-300 rounded-md;
    }

    /* more styles */
}

Because Tailwind is a utility framework, you can always easily override just like you would if you were using CSS the traditional way. You've made all your h2's have the color of cyan but need to make them black for a few exceptions? You can easily override them in the HTML.

Plus, this makes it an easy way to go back and update the global styles of a project. Started your project with your default buttons being pink and decided that all of them need to be purple? Just open up your project's CSS file and change it that way.

Extract Reusable Components

Maybe you're using the same group of classes for list items, a group of cards, or a page header, either way, once you notice that you're using the same group of classes more than once or twice, that would be a good time to make it a custom component. In the same way, you would add apply classes to your global styles under the base layer, you would apply tailwind classes to a new class under the components layer like this:

@layer components {
    .page-header {
        @apply bg-gradient-to-br from-sky-500 to-yellow-400 text-white p-8;
   }
}

Plugins

There are plenty of plugins that can help you so use them. Some help you with customizing an app's scrollbar, typography, forms, and much more. You know how hard it is to style forms. I loathe forms but they're important when it comes to styling a web app, so use that Tailwind form plugin. Also, there's a whole page on Best of Tailwind dedicated to Tailwind plugins.

https://bestoftailwind.com/t/plugins

Additional Tips

• Read the documentation - Tailwind's official documentation is very good. It's clear and concise.

• Do not be afraid to experiment - sometimes you learn and discover new effective ways by experimenting

What are some tips and tricks you use when using Tailwind.css for your front-end projects?