Extending color palette

[bob3x255]

Hi!

I am currently going through Advanced Customization guide and I wonder how can I add several more custom colors to it?
It seems that after adding other colors to /schemes/.css they just don't seem to apply. I also tried adding them into tailwind.config.js, still no effect.

[jpanther]

Need a bit more information to understand what exactly you're trying to achieve. What are you using these custom colours for? Are you trying to use default Tailwind classes, or CSS variables, or something else?

[bob3x255]

I just want to add several specific colors that are not in Tailwind palette.

After I followed Building the theme CSS from source I tried to add 6 custom colors in /scheme/custom-css, however, they are not applied. Also, I've tried to add them in tailwind.config.js through theme extend like so:

brand: {
          transparent: 'transparent',
          current: 'currentColor',
          'brandGreen': '#A1C63E',
          'brandOrange': '#F4A00B',
          'brandRed': '#C92A31',
          'darkGray': '#151A21',
          'darkGreen': '#79A90B',
          'darkOrange': '#D87B0E',

Didn't apply those colors as well.

[jpanther]

This is definitely possible through custom CSS or extending the Tailwind config. It really depends on your use case. In terms of extending Tailwind, you can simply use the official Tailwind docs to understand the correct config params.

Something like the below should get you what you want. If you still need the Congo styles, you need to ensure you include them too.

 theme: {
    colors: {
          transparent: 'transparent',
          current: 'currentColor',
          'brandGreen': '#A1C63E',
          'brandOrange': '#F4A00B',
          'brandRed': '#C92A31',
          'darkGray': '#151A21',
          'darkGreen': '#79A90B',
          'darkOrange': '#D87B0E'
          ...
    }

[bob3x255]

Thanks @jpanther!

I guess I found the problem. I needed to recompile css, however, I did it wrong folder themes/congo instead of root folder. Now, everything works.

[leiluspocus]

Hello @bob3x255 and @jpanther

How can we extend the tailwind config ?

I would also like to add a color but I did it by editing the tailwind.config.js file existing in the themes/congo folder.

I would like to avoid editing this file in order to upgrade the theme easily in the future...

Thank you in advance for your lights !