Tailwind: How to access default things after configuring the config file?

In order to have the user be able to select their color scheme in my website, I added a few themes in my style.css file. For example, one is "theme-light"

.theme-light {
  --color-bg-primary: theme('colors.white');
  --color-bg-typing: theme('colors.white');
  --color-bg-input: theme('colors.white');
  --color-bg-redo: theme('colors.blue.500');
  --color-bg-redo-hover: theme('colors.red.500');
  --color-bg-nav: theme('colors.red.500');
  --color-bg-nav-active: theme('colors.red.500');
  --color-text-primary: theme('colors.gray.900');
  --color-text-secondary: theme('colors.gray.600');
  --color-text-current: theme('colors.gray.900');
  --color-text-correct: theme('colors.green.400');
  --color-text-wrong: theme('colors.red.400');
  --color-text-stats: theme('colors.gray.600');
  --color-placeholder-primary: theme('colors.gray.600');
}

And I edited my tailwind.config.js file like so:

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  purge: [],
  theme: {
    backgroundColor: {
      primary: 'var(--color-bg-primary)',
      typing: 'var(--color-bg-typing)',
      input: 'var(--color-bg-input)',
      redo: 'var(--color-bg-redo)',
      'redo-hover': 'var(--color-bg-redo-hover)',
      nav: 'var(--color-bg-nav)',
      'nav-active': 'var(--color-bg-nav-active)',
    },
    textColor: {
      primary: 'var(--color-text-primary)',
      secondary: 'var(--color-text-secondary)',
      current: 'var(--color-text-current)',
      correct: 'var(--color-text-correct)',
      wrong: 'var(--color-text-wrong)',
      stats: 'var(--color-text-stats)',
    },
    placeholderColor: {
      primary: 'var(--color-placeholder-primary)',
    },
  },
  variants: {},
  plugins: [require('@tailwindcss/typography')],
};

My question is: now I am unable to set anything like I was before in the html (like "text-blue-400" or "text-opacity-50"). How can I get the default configurations working again?