Dark/Light Modes in Tailwind

Image of dark/light themes in Tailwind
Image of dark/light themes in Tailwind

When working with multi-theme templates, keeping colors consistent across various components is a challenge. After several experiences with inconsistencies, I found an easy and scalable solution: using addBase in TailwindCSS to define colors in :root. It’s simple, elegant, and makes life easier.

Colors and themes under control

plugins: [
  plugin(function ({ addBase }) {
    addBase({
      ":root": {
        "--color-background": "#fefefe",
        "--color-foreground": "#0f0f0f",
      },
      ".dark": {
        "--color-background": "#1d1e26",
        "--color-foreground": "#e8eaf0",
      },
    });
  });
]

With addBase in tailwind.config.mjs, I centralize my color palette in :root and manage themes like light and dark effortlessly. A single variable change updates everything instantly—no more searching and replacing across a thousand files. Plus, toggling themes with a class like .dark is a breeze, perfect for projects needing flexibility without complications.

Performance, SEO, and maintenance in one trick

Using .mjs with addBase isn’t just practical—it optimizes. The generated CSS is lightweight, builds are faster, and browsers process it easily. For large projects, or small ones that might scale, it’s a game-changer: fewer inconsistencies, less time wasted hunting down stray values, and code that any dev on the team can grasp at a glance.

Conclusion

addBase in :root with .mjs gives me consistency, performance, and flexibility for dynamic themes. It’s SEO-friendly, simplifies maintenance, and makes my templates robust. If you’re after maintainable code and an optimized UX, this approach is a must. Try it and say goodbye to color chaos! 🚀

← Back to Blog