Introduction

Tailwind CSS has gained immense popularity among web developers due to its utility-first approach and easy customization options. While many developers are familiar with the basics of Tailwind, there are several advanced techniques and tips that can take your Tailwind skills to the next level.

In this article, we will explore the top five advanced Tailwind tips that will help you optimize your workflow, enhance your designs, and make your development process more efficient.

Copying classnames is perfectly fine

Many times you might have come across a situation where you repeat a classnames a bunch of time like this 👇

 <ul>
      <li className="text-lg font-medium text-blue-600 hover:opacity-80">
        Home
      </li>
      <li className="text-lg font-medium text-blue-600 hover:opacity-80">
        About
      </li>
      <li className="text-lg font-medium text-blue-600 hover:opacity-80">
        Contact
      </li>
      <li className="text-lg font-medium text-blue-600 hover:opacity-80">
        Signin
      </li>
 </ul>

You might get tempted to create a separate component for <li> to apply styles. Creating a separate component for <li> solely to apply styles may not be necessary, in my opinion. Instead, you can leverage the capabilities of your text editor, such as multi-cursor editing. Alternatively, you can style a single <li> first, applying the desired design, and then simply copy the class names from that <li> to reuse them elsewhere. This approach can save time and streamline the development process

Dark mode

If you have implemented a dark mode using the class strategy, you may have noticed that your sidebar appears white in color, which doesn't look quite right. To resolve this issue, you can rectify it by setting the color-scheme property of html element to light dark.

html.dark{
    color-scheme: dark light;
}

If you're unsure about implementing dark mode in a React+Tailwind project, I have written a detailed article explaining the process. Take a look to learn how to effectively incorporate dark mode into your projects.

View artcle

Using ring utility to create shadows

Tailwind provides pre-defined classes for box-shadow, but none of them create an evenly distributed shadow in all four directions. However, you can accomplish this by utilizing the ring utility.

className = "ring-1 ring-black/10"

Optimize Workflow with Plugins

Tailwind offers a vast ecosystem of plugins that extend its functionality and streamline your workflow. Plugins can add new components, utilities, or even integrate with other libraries. Familiarize yourself with popular plugins such as Typography, Forms, Aspect Ratio, or Transition utilities to boost your productivity.

By leveraging plugins, you can enhance your designs and reduce the need for writing custom CSS.

If you are building a PWA you should definitely check this plugin I made. It helps you to increase the UX of your PWA.

Using tailwind-merge instead of regular classname constructer

When incorporating Tailwind CSS into a JavaScript framework, you might have utilized packages such as classnames or clsx to dynamically generate class names for elements based on your custom logic. These packages streamline the task of conditionally adding class names, making the process much simpler and more efficient.

However, if you're building your own design system and require your components/elements to accept a classname prop that can modify specific styles of your components, I suggest utilizing tailwind-merge instead of clsx or classnames.

Imagine this is how you are computing classname for your component

type Props = ComponentProps<"a">;
const Test = ({ className, ...rest }: Props) => {
  return (
    <a
      {...rest}
      className={clsx(
        "classes required to satisfy your design system",
        className
      )}
    >
      Test
    </a>
  );
};

for arguments sake let's assume this the className

 className={clsx("text-blue-600 text-4xl font-bold", className)}

and you wish to change the text color to fuchsia-600, you can easily pass text-fuchsia-600 as the className, and it will work seamlessly. However, if you attempt to change the text color to black by passing text-black, it won't have the desired effect.

This is due to the nature of Tailwind, where utility classes are applied, and each class carries the same level of specificity. As a result, when multiple classes modify the same element property, the class that appears later takes precedence. This behavior aligns with the standard CSS principles.

Let's look at the classnames computed in both the cases

// when text-fuchsia-600 is passed className = "text-blue-600 text-4xl font-bold text-fuchsia-600"

// when text-black is passed as className = "text-blue-600 text-4xl font-bold text-black"

Now we will swap tailwind-merge for clsx or classnames and let's look at the computed classes again.

// when text-fuchsia-600 is passed className = "text-4xl font-bold text-fuchsia-600"

// when text-black is passed as className = "text-4xl font-bold text-black"

If you have noticed keenly tailwind-merge just removed conflicting classes altogether 🤯.

Amazed by what tailwind-merge can achieve ? Start using it today by downloading through npm

npm i tailwind-merge

If you want to know more about tailwind-merge watch this tutorial by Simonwiss on Youtube

Conclusion

Tailwind CSS is a powerful utility-first framework that offers numerous advanced techniques to enhance your web development workflow. In this article, we explored five valuable tips to take your Tailwind skills to the next level.

I encourage you to try out these advanced Tailwind tips in your web development projects.

I would love to hear about your experiences and feedback. Please feel free to share your thoughts and insights in the comments section below. Your feedback is valuable and can help further refine these techniques and contribute to the Tailwind CSS community.

If you enjoyed reading this post and want to stay connected, make sure to check out my Linktree.

Happy Hacking