I am also using tailwind css

This is the Css Module File

@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";
  }
}

This is the div using the css styles from the css modules.

The variables are sent from the component based on the 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>