Css – My styles are not being applied from my sass file

I recently started contributing to this large codebase which uses modules.scss files to style. I followed the same way other components were written and imported my styles file exactly how they imported others but for some reason the styles are not being applied.

// RegistrattionOverview.modules.scss

@use 'src/styles/colors' as colors;

.activeTab {
    color: colors.$primary;
    background-color: colors.$charcoal;
}

.inactiveTab {
    color: colors.$alto;
    background-color: colors.$black;
}

And then I use it like this:

//RegistrattionOverview.jsx

import styles from './RegistrattionOverview.modules.scss';


<div
  className={currentTab === overviewTabs.REGISTRATIONS ? styles.activeTab : styles.inactiveTab)}
  onClick={() => setCurrent(overviewTabs.REGISTRATIONS)}
 >
    {t('seriesOverview.registrations')}
 </div>

Checking the devtools on chrome the styles are not even being applied at all. I have hard reloaded several time it still doesn’t work. Does anyone one know what else I can do?

I expect for the tabs to change colour depending on their state.