Stop using Tailwind for theme styles – here's why

Tailwind classes and Tailwind CSS variables should not be used for theme-related CSS properties such as text color, background color, border color, and box shadows. Instead, we should use the NeetoUI utility classes or NeetoUI CSS variables.

Why?

🚫 Tailwind classes are static

Tailwind’s color classes (e.g., bg-gray-800, text-primary-500) don’t automatically adapt to light/dark themes.

<div class="bg-white text-gray-800">...</div> <!-- remains unchanged in dark mode -->

🚫 Tailwind CSS variables are not theme-aware

Variables like --tw-primary-500 or custom-defined values in tailwind.config.js do not automatically respond to theme changes unless explicitly redefined. This makes them unreliable for dynamic theming.

.custom-element {
  background: var(--color-mint-500);
}

The NeetoUI solution

Use the NeetoUI utility classes or NeetoUI CSS variables.

✅ Utility classes

<!-- Automatically adapts to light/dark themes -->
<div class="neeto-ui-text-gray-800 neeto-ui-bg-gray-50">
  Content
</div>

✅ CSS variables

.custom-element {
  background: var(--neeto-ui-bg-gray-50);
  color: var(--neeto-ui-text-gray-800);
  /* Automatically theme-aware */
}

Key benefits of NeetoUI

Automatic Dark Mode Support
No more manual dark: prefixes everywhere
Centralized Theme Control
Change colors in one place, update everywhere