[typhoon] Missing colors and changing footer

[bobbasli]

Hi,

I want to change the color of the footer but I can not seem to find where to change it.
Further on am I missing quite some tailwind colors.

Please explain how I can het all tailwind colors in the theme css.

Thanks,

Arjan

[rhukster]

tailwind only provides colors that are 'used' during the tailwind 'compile' phase. This is documented here, so no point repeating: https://getgrav.org/premium/typhoon/docs#modify-the-css

There is a file called available-classes.md that effectively serves as a way to hardcode some color options. This file is picked up during compile (along with twig templates, configuration, page header content etc), so that they are available to use. So if you want to make certain colors available with recompiling, you should add them in this file, and then recompile once and they will usable from that point forward.

However, typically while a developing a site, you are use the watch/dev option to compile as you make changes and edits to your theme, and content, and it's constantly updating the CSS with the classes you are using (including colors). This is the way 99% of people develop with tailwind (made that number up, but you get the idea 😀)

Regarding the color of the footer, it's not configurable per say, it's just in the templates/partials/footer.html.twig:

<footer class="bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 text-sm">

just edit this for the colors you want (default and dark: variants if you are supporting dark mode), then recompile (see link above).

Cheers,

[bobbasli]

I added some custom css files in the typhoon/css/custom folder and added them as @import to the site.css.
The custom css files are not loaded however.
What am I doing wrong?

[rhukster]

Please read this section I linked above: https://getgrav.org/premium/typhoon/docs#modify-the-css

you need to use NPM to recompile the CSS to pick up the classes you added.. it's not optional, it has to be done so Tailwind sees you need them, and can include them in the final compiled CSS. This is all done for performance and optimization purposes, and it's how Tailwind has become so popular.. no more dead CSS that is being loaded but never used etc.