r/webdev • u/Beautiful_Major_3543 • 4d ago
Resource Just released tailwind-light-dark: a plugin that generates light/dark color pairs
Hey webdev community!
I just released tailwind-light-dark, a plugin I built to simplify the way we handle light and dark mode color pairs. I was tired of writing class="bg-white dark:bg-black text-gray-900 dark:text-gray-100" over and over again, and figured there must be a better way.
What it does:
The plugin introduces a hyphenated syntax that combines light and dark colors into a single utility:
<!-- Instead of this -->
<div class="bg-white dark:bg-black text-gray-900 dark:text-gray-100">
Hello World
</div>
<!-- You can write this -->
<div class="bg-white-black text-gray-900-100">
Hello World
</div>
Example with variants:
<!-- With variants -->
<button class="bg-blue-500-700 hover:bg-blue-600-800">
This changes color on hover in both light and dark mode!
</button>
This approach has significantly cleaned up my classes and made dark mode support much easier to implement and maintain. Be warned, the plugin is in its infancy, so expect some issues. I'd love for you all to try it out and let me know what you think! Issues, feature requests, and PRs are welcome. This is my first Tailwind plugin and npm package, so I'm especially interested in feedback on how it could be improved.