ivan breslauer.

5 Common TailwindCSS Mistakes

Last updated: Mar 17, 2024 | 4 min read
Cover image

This blog post was spontaneously generated by Claude 3 with minimal input. Consider it a placeholder until I write a piece that's informative and entertaining (sarcasm included). Until then, don't believe a single word written below.

TailwindCSS has gained immense popularity among developers due to its simplicity, utility-first approach, and ease of use. However, even with its straightforward nature, there are some common mistakes that developers often make when working with TailwindCSS. In this blog post, we'll discuss five of these mistakes and how to avoid them.

1. Not Purging Unused Styles

One of the main advantages of TailwindCSS is its ability to generate utility classes on-the-fly, which can lead to larger file sizes if unused styles are not purged. Fortunately, TailwindCSS provides a built-in purge mechanism that removes unused styles from your final CSS output. To take advantage of this feature, make sure to configure the purge option in your tailwind.config.js file.

// tailwind.config.js
module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  // ...
};

2. Dynamically-Set CSS Classes

While TailwindCSS is designed to work seamlessly with dynamic class names, setting classes dynamically can sometimes lead to issues. For example, if you have a conditional statement that sets a class based on a certain condition, and that condition is never met, the class will never be included in your final CSS output. This can result in unexpected styling issues.

The following example using template literals won't work as expected:

<div className={`transition-all duration-${durationMs}`}>{/* Content */}</div>

This is because the class transition-all duration-${durationMs} will be treated as a string literal, and TailwindCSS won't be able to extract the individual utility classes from it.

Instead, you should use the style prop and set the transition directly in the inline styles:

<div style={{ transition: `all ${durationMs}ms ease-in-out` }}>
  {/* Content */}
</div>

This way, you can dynamically set the transition duration without relying on TailwindCSS utility classes.

3. Not Taking Advantage of Responsive Utilities

TailwindCSS provides a comprehensive set of responsive utilities out-of-the-box, allowing you to apply styles based on different screen sizes. However, many developers often overlook these utilities and end up writing custom media queries, which can lead to code duplication and maintenance issues.

Instead of writing custom media queries, make use of TailwindCSS's responsive utilities. For example, to apply a different padding on small screens, you can use the p-2 class for mobile devices and p-4 for larger screens.

<div class="p-4 sm:p-2">
  <!-- Content -->
</div>

4. Over-Nesting Classes

While TailwindCSS encourages the use of utility classes, over-nesting these classes can lead to specificity issues and make your code harder to maintain. Instead of nesting multiple classes, consider breaking them up into separate classes or using TailwindCSS's built-in modifiers.

<!-- Bad -->
<div class="bg-white rounded-lg shadow-md p-4 flex flex-col justify-between">
  <!-- Content -->
</div>

<!-- Good -->
<div class="bg-white rounded-lg shadow-md p-4 flex flex-col items-between">
  <!-- Content -->
</div>

5. Not Using Custom Configurations

TailwindCSS provides a lot of flexibility through its configuration file, tailwind.config.js. You can customize color palettes, typography, spacing, and more to better align with your project's design system. However, many developers often overlook this feature and end up writing custom CSS, which can lead to maintenance issues and bloated stylesheets.

To take advantage of custom configurations, explore the various options available in the tailwind.config.js file and customize them according to your project's needs.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        "brand-primary": "#FF6B00",
        "brand-secondary": "#FFC300",
      },
      // ...
    },
  },
  // ...
};

By avoiding these common mistakes, you can ensure that your TailwindCSS implementation is efficient, maintainable, and aligned with best practices. Remember, the key to mastering TailwindCSS is understanding its utility-first approach and taking advantage of its built-in features and configurations.

ib7r.dev