Modos dark/light en Tailwind

Cuando trabajo con plantillas multi tema, mantener los colores coherentes es un reto entre los distintos components. Tras varías experiencias con inconsistencias, encontré una solución fácil y escalable: usar addBase en TailwindCSS para definir colores en :root. Es simple, elegante y hace la vida más fácil.

Colores y temas bajo control

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

Con addBase en tailwind.config.mjs, centralizo mi paleta en :root y gestiono temas como light y dark sin esfuerzo. Un cambio en una variable y todo se actualiza al instante, no más buscar y reemplazar por mil archivos. Además, alternar temas con una clase como .dark es pan comido, perfecto para proyectos que necesitan flexibilidad sin complicaciones.

Rendimiento, SEO y mantenimiento en un solo truco

Usar .mjs con addBase no solo es práctico, sino que optimiza. El CSS generado es ligero, los builds son más rápidos y los navegadores lo procesan fácilmente. Para proyectos grandes, o pequeños que pueden escalar es muy práctico: menos inconsistencias, menos tiempo perdido buscando valores sueltos, y un código que cualquier dev del equipo entiende de un vistazo.

Conclusión

AddBase en :root con .mjs me da consistencia, rendimiento y flexibilidad para temas dinámicos. Es SEO-friendly, simplifica el mantenimiento y hace que mis plantillas sean robustas. Si buscas código mantenible y una UX optimizada, este enfoque es imprescindible. ¡Pruébalo y dile adiós al caos de colores! 🚀