gouravkhunger
commented
2 years ago The recently merged PR removes the need to manually update safelist for each new color added:
This is not an intended solution but gets the work done for the time being. This issue is kept open for further discussion.
Whenever one hovers on a post there's a visible border color that is specific to the category of the post. For example, the category for this post is android, so wherever there's a link to this post, there's a green hover color.
This color is achieved by templating the classes for the link with these classes:
hover:border-{{ category }}and an!importantfield fordark:hover:!border-{{ category }}(notice!) where{{ category }}denotes the category of the current post that Jekyll is rendering:https://github.com/genicsblog/theme-files/blob/abf9722181c466a34559ee69919ad66351bef575/_includes/postbox.html#L6
The possible combinations for the categories are defined in the
tailwind.config.jsfile's safelist section:https://github.com/genicsblog/theme-files/blob/a6b973e8b408d1b7110fbc39318c6eb31eac2976/tailwind.config.js#L6-L22
And the colors are there in the section:
https://github.com/genicsblog/theme-files/blob/a6b973e8b408d1b7110fbc39318c6eb31eac2976/tailwind.config.js#L23-L37
There are two classes in a single element:
dark:hover:border-slate-200 dark:hover:!border-{{ category }}, and the second one is marked important with!to force apply category color and fallback to default color if it isn't present.This is done because if there is no specific color assigned in the
tailwind.config.jsfile, It falls back to the default black color in light mode and white border in dark mode.There needs to be such hard-coding because tailwind can't automatically include dynamic CSS classes, at least up to the point I have tested it with Jekyll.
There is a need to find a better solution than manually having to hardcode the safelist every time...