Enhancing the theming system to use all tailwind colors

[DebChanda]

Firstly, thank you very much for this awesome project. I am using it to build an academic website and am pretty happy with the result.

I am creating this discussion to propose an idea, where the current theming system will be upgraded and the user can specify any of the 22 tailwind colors (e.g. Amber, Rose, Slate etc.) as primary, secondary, and neutral in config.toml file. This can be achieved by generating a code similar to the color-scheme (css files located in assets/css/schemes) with the help of hugo partials. This will merely be an enhancement, the current themes will still have a higher priority (these new settings will be taken into account only if the user specifies all three colors in config.toml correctly.)

I can provide a minimal example if anyone is interested.

[DebChanda]

I have created a repo to demonstrate this.
In the assets\css\colors\{color-name}.css files, I have defined all the default tailwind colors (described here) as CSS custom properties. There are three aditional keys defined in config.toml, namely colorPrimary, colorSecondary, and colorNeutral; which indicates the CSS files to be linked. Lastly, I have added an additional partial in layouts/partial/theme.css, which will dynamically generate the :root section in the head.html where the colors are reassigned like:

    --color-primary-50: var(--color-{{$primary}}-50);
    --color-primary-100: var(--color-{{$primary}}-100);
    --color-primary-200: var(--color-{{$primary}}-200);
    --color-primary-300: var(--color-{{$primary}}-300);
    --color-primary-400: var(--color-{{$primary}}-400);
    --color-primary-500: var(--color-{{$primary}}-500);
    --color-primary-600: var(--color-{{$primary}}-600);
    --color-primary-700: var(--color-{{$primary}}-700);
    --color-primary-800: var(--color-{{$primary}}-800);
    --color-primary-900: var(--color-{{$primary}}-900);

So, when a user would write colorPrimary = "amber" in the config.html, the colors in assets/css/colors/amber.css will be assigned as color-primary. This will also provide access to all the associated tailwind utility classes.
Thank you very much.