DEV Community

Erik Guzman
Erik Guzman

Posted on

1

TIL: How having Dark mode classes not removed for Tailwind prod

Recently I did some work on my website Stream Closed Captioner to incorporate a dark mode. Locally everything went smoothly but I came across an issue in the production build where all the dark mode styles weren't being added.

After much head scratching and changing random things here and there I finally discovered a solution.

I needed to add the dark mode classes explicitly to the safe list of classes in my Tailwind config. Not sure why I had to since the official guide didn't mention it, but it sure did the trick. Here is my Tailwind config file for anyone looking to solve their issue,

module.exports = {
  darkMode: 'class',
  purge: {
    enabled: process.env.MIX_ENV === 'prod',
    content: ['../lib/**/*.eex', '../lib/**/*.leex'],
    options: {
      safelist: ['dark'],
    },
  },
  plugins: [
    ...
  ],
};
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay