Plugin uses default Tailwind colors

[RubenVanEldik]

I have custom gray values for Tailwind, but the Typography plugin still uses the default gray values. Is this expected behaviour?

Looking at the computed CSS colors they appear to all be the standard Tailwind gray colors (gray-100, gray-700, and gray-900, etc.). I know that these standard colors are hand picked, but it would be awesome if the Typography plugin would automatically use the custom colors so the prose sections are more aligned with the style of the site. I am super new to Tailwind, so I don't know this technically is possible.

[RomainMazB]

Hi @RubenVanEldik ,
I've just looked into the sources for another thing and land on your issue just before go away.

It looks like it's the expected behaviour but you can override it using the theme, even if it would be fastidious (you'll need to override 20 properties):

module.exports = {
    theme: {
        typography: {
            default: {
                css: {
                    color: yourGray[700],
                    a: {
                        color: yourGray[700]
                    }
                    // ...
                },
            },
        },
    }
}

[RubenVanEldik]

@RomainMazB Thank you for your quick response!

I understand now why this is expected behaviour. I'll customize it manually for now.

It might be a good idea to have a plugin option to use the custom colors instead of the default colors, since the colors are probably the main thing people would like to customize. @adamwathan would you be open for a pull request for this?

[adamwathan]

For now I'd like to keep the customization stuff as-is, as even if we did support a way to just use the user's color config instead of the default there is no way of guaranteeing the styles even exist, or that they have the right perceived brightness to even look correct. I think it's simpler to just let people override the colors using the current API for now than to try and get too clever with that stuff.

Eventually we'd like to add some higher-level options so you can just do stuff like bodyColor: #444 or headingColor: #000. We nested all of the existing options under css to reserve the root-level for ideas like this once we have a better sense of exactly what we should provide 👍