Why Tailwind CSS Sometimes Leaves You Scratching Your Head

#webdev #tailwindcss #nextjs #react

Hey there! 👋

If you use Tailwind CSS regularly, you’re probably a fan of its utility-first approach. It's fast, it's flexible, and it makes styling so much easier. But... sometimes, things don’t work as expected, and it can get a bit frustrating. 😩

The real headache comes when you're applying styles like mt-12 or mt-16. You're sure those values are multiples of 4 (4, 8, 12, 16, etc.), and you think, "Okay, this will convert nicely to rem and then px, and everything will work fine!" But when you check the webpage, surprise! 🎉 The new styling doesn’t reflect, and sometimes even the previous styles are gone. What’s going on? 🤔

What’s Happening? 🤷‍♂️

This happens because of how Tailwind CSS works—especially since version 3. Let’s break it down. 🛠️

Tailwind doesn’t just generate a huge CSS file with all the possible utility classes. Instead, it scans your code and only includes the utility classes that you actually use. For example, if you write the following in your HTML:

<div class="mt-4 pb-4">
</div>

Tailwind will generate the following CSS:

.mt-4 {
  margin-top: 1rem; /* 16px */
}

.pb-4 {
  padding-bottom: 1rem; /* 16px */
}

Now, this is great because it keeps your final CSS file small and clean. But there’s a catch—Tailwind also purges unused classes when building for production. The problem is that, sometimes, it can even purge in development, causing some unexpected issues. 😬

Why Does This Happen? 😵‍💫

You may think your code is perfect and the classes are correct. But when Tailwind runs its purge process, it might remove classes that you expect to be included, especially if they are dynamically used or appear only in specific screen sizes (like sm:mt-4 or lg:pb-12). This can cause styles to disappear unexpectedly. 🚫

For example, if you're pushing your code to production in an hour and Tailwind decides to purge something important in development, you’re left with a broken layout and a lot of frustration. 😤

How to Fix It (Quickly) ⚡

If you’re in a rush and need a quick fix without going through the entire Tailwind installation process, you can use Tailwind’s safe list. This will prevent your specific styles from being purged, even in development. 🙌

Here’s how you do it:

Open your tailwind.config.js file.
Add a safeList option to the config.

module.exports = {
  content: [
    // your content paths
  ],
  safelist: [
    'mt-4', 
    'pb-4', 
    'lg:pb-12', 
    'sm:mt-4', 
    // Add any other styles that are being purged or not rendering
  ],
};

By adding the styles to the safelist, you’re telling Tailwind to keep those classes in the final build, no matter what. It’s a quick workaround that will let you finish your work without worrying about unintended purging. 🔒

Final Thoughts 🤔

Some articles suggest that improper installation might be the cause of these issues, but this safelist method is a simple solution for anyone who needs to get things done quickly without diving deep into configuration. While not a complete fix, it’s a good workaround for development until you have time to revisit the installation or configuration issues. 🏃‍♂️💨

Happy coding, and see you next time! 👨‍💻👋