How to define custom colors and use them in dark, light mode without using :dark?
I am using Tailwind CSS v4 and want to define custom colors that automatically switch between light and dark modes. Instead of using the dark: prefix for every class, I want to manage color changes through CSS variables in my React project.
Here’s what I’m trying to achieve:
- Define custom colors (e.g.,
primary,baseColor,textColor). - Automatically switch these values based on light or dark mode.
- Avoid using
dark:in every class for better maintainability.
I’ve tried adding CSS variables via :root and the dark class but want to ensure I’m following best practices for Tailwind v4.
How can I configure tailwind.config.ts and global CSS to achieve this?