También estoy usando Tailwind CSS

Este es el archivo del módulo Css

 @tailwind components; @layer components { /* Colors from colorConsts */ .survey_sections { /* fallbacks */ --text-color: "#2563EB"; /*blue-600*/ --border-color: "#3B82F6"; /*blue-500*/ color: var(--text-color); border-color: var(--border-color); } .survey_sections:hover { color: "#2563EB"; border-color: "#3B82F6"; } }

Este es el div que usa los estilos css de los módulos css.

Las variables se envían desde el componente en función del formColor.

 <div className={`${surveyStyles.survey_sections} inline-flex justify-center items-center px-3 py-1 mx-3 cursor-pointer border-b-2`} style={ section === QUESTIONS ? { "--text-color": colorShades[formColor.name][600], "--border-color": colorShades[formColor.name][500], } : { "--text-color": colorShades["gray"][600], "--border-color": colorShades["gray"][300], } } > <span className="font-medium text-base mx-1">Questions</span> </div>