Tailwind configuration

Developers
1

Hi Team Gibbon,

So I went through this documentation [A case for Tailwind CSS · Issue #805 · GibbonEdu/core · GitHub](A case for Tailwind CSS) about Tailwind integration.

So I was wondering if for example I wanted to add a new color of my own to match my school colors scheme. How would I do it ?
I thought of maybe adding some config in the resource/build/tailwind.js config file like:

module.exports = {
    theme: {
        [...],
        extend: {
            colors: {
                [...]
               goblin: {
                    100: 'hsl(120, 100%, 97%)',  // Very light green
                    200: 'hsl(120, 100%, 89%)',  // Light green
                    300: 'hsl(120, 100%, 83%)',  // Lighter mid green
                    400: 'hsl(120, 98%, 65%)',   // Mid green
                    500: 'hsl(120, 98%, 57%)',   // Standard green
                    600: 'hsl(120, 98%, 50%)',   // Slightly darker green
                    700: 'hsl(120, 98%, 42%)',   // Dark green
                    800: 'hsl(120, 92%, 37%)',   // Darker green
                    900: 'hsl(120, 80%, 30%)',   // Very dark green
                },
[...]

And then run a npm run build.

But maybe I didn’t understand well the documentation.

Can you help me figure this out ?

Thanks you a lot !

2

Hi @odihamdalaye Good question. Yes, this is how one would add a colour to Gibbon. However, I think the tricky part is that the resources/build directory is part of the core, so your changes to Tailwind and files generated by npm build commands would just be local to your installation and overwritten anytime the core was updated. A more long-term option would be to make your own theme, which would persist any of your changes. You could duplicate the Default theme, update the directory name and manifest to give it a new name, and then customise your theme as desired. You could then add any css changes to the theme css, which are loaded separately from the core css.