Top Mistakes You're Making with TailwindCSS

Tailwind CSS has been a game-changer in the world of web development, offering a unique approach to styling websites. Unlike traditional CSS frameworks, Tailwind encourages the use of utility classes to style elements directly in your HTML, eliminating the need for writing custom CSS. This approach not only speeds up development but also ensures consistency across projects.

Understanding Tailwind CSS Compilation Process

Before we dive into the common mistakes, let's unravel the magic behind Tailwind CSS. Tailwind operates differently from traditional CSS frameworks. Instead of predefining styles in your CSS files, Tailwind dynamically generates a comprehensive list of utility classes tailored to your project's configuration.

These utility classes consist of a wide range of styling options, from margins and padding to colors and typography. During the build process, it also processes any tailwind classes you've used and compiles them into the final CSS file, ensuring that all styles are included and optimized for your project.

Now, let's explore some of the pitfalls developers often walk into when working with Tailwind CSS:

Overuse of Arbitrary Values:

Tailwind's approach to utility classes is highly flexible, allowing for the use of arbitrary values within its properties. For instance, if you require a specific pixel value like top: 117px for positioning a background image precisely, Tailwind's square bracket notation enables the creation of custom classes on the fly.

<div class="top-[117px] lg:top-[344px]">
  <!-- ... -->
</div>

However, over-reliance on these ad hoc solutions instead of following or updating established tailwind configurations can result in the build-up of unused and non-standard utility classes, bloating the final CSS output.

To tackle this, developers should use custom classes sparingly and stick to the existing style rules. It's important to regularly review and update these guidelines to match the changing needs of the project.

Dynamic Classes in Tailwind CSS
If you have tried passing a dynamic value to a Tailwind CSS class, it will most likely fail to work. Although the class name is properly applied to the HTML element, the corresponding styles are not.

Since Tailwind has a massive collection of classes, it doesn’t include them all in the final stylesheet. To reduce the size of the bundle, it only compiles the styles for classes that you mention inside your code. Refer to this to understand class detection in depth.

When Tailwind parses your source files and sees a class that contains a dynamic value, it doesn’t recognize it. Therefore those styles are not compiled.
```
 // ❌ using a dynamic value within Tailwind CSS class
 <p className={`text-${size}xl`}>Hello</p>

 // ❌ using a variable that contains a dynamic value
 const style = `text-${size}xl`;
 <p className={style}>Hello</p>
```
Instead, map dynamic props to complete class names that are statically detectable at build-time::

function Button({ color, children }) {
// ✅ mapping to a static and complete Tailwind CSS classes
  const colorVariants = {
    blue: 'bg-blue-600 hover:bg-blue-500',
    red: 'bg-red-600 hover:bg-red-500',
  }

  return (
    <button className={`${colorVariants[color]} ...`}>
      {children}
    </button>
  )
}

Excessive use of @apply:
Using @apply in Tailwind CSS can be both a blessing and a curse. On one hand, it offers a convenient way to apply complex utility classes in a concise manner, promoting code reusability and maintaining a consistent design system. However, excessive use of @apply can lead to bloated CSS files and decreased performance, especially if it results in the generation of redundant styles.

Be sure to take the following into consideration and don't just spam @apply everywhere [tailwindcss.com/docs/reusing-styles#avoidin...

](tailwindcss.com/docs/reusing-styles#avoidin.. essential to strike a balance between using @apply for efficiency and relying on Tailwind's utility classes directly when appropriate. Additionally, keeping an eye on the resulting CSS output and periodically auditing the codebase can help identify and eliminate any unnecessary or duplicated styles.
Sorting of the tailwind classes
Developers often overlook sorting Tailwind CSS classes and don't prioritize it.

While Tailwind CSS doesn't require a specific sorting order for classes, it's a good idea to keep them organized for readability and maintenance. The order matters because it affects specificity, overrides, and code readability. So, while not strictly necessary, sorting classes consistently can make your code easier to manage in the long run.

You can explore automatic class sorting with the Prettier plugin on the Tailwind CSS documentation page provided here: Tailwind CSS Documentation - Automatic Class Sorting with Prettier.

Conclusion

In summary, Tailwind CSS can be a great tool for improving performance and making development easier. But it's important to use it carefully. Follow the suggested design guidelines and set up Tailwind properly. Keep an eye out for any overuse of certain styles. Stick to a consistent approach to get the most out of Tailwind without running into problems.