Do not use dynamic class names

[Thibaultfq]

Hi,

I noticed that you used dynamic class names in your components. This is problematic because dynamic class names are not recognised by tailwind, and hence, not generated into the output css.

All the hover variables in colors.js are an example of that, but there are more such as focus:{{...}} or sm:{{...}}

Only solution is to have colors.js (and others ofc) reference only the full class names and remove modifiers such as hover:{{...}} or sm:{{...}} etc from source template files.
eg: colors.js

   navDefault: {
    barBg: 'sm:bg-white',
    textHover: 'sm:hover:text-red-900',
    mobileBg: 'bg-white',
    mobileBgActive: 'bg-red-500',
    mobileBgHover: 'hover:bg-red-100',
  }

see the tailwind documentation on this https://tailwindcss.com/docs/content-configuration#dynamic-class-names