Overriding default colours inline about tailwindcss-typography HOT 2 CLOSED

Hey! The underlying issue here is just CSS specificity.

Our rules look like this:

.prose h1 {
  color: #000;
}

This rule has a specificity of 011 (one class and one element).

Our utilities like text-green-500 have a specificity of 010, so even though they are defined later in the stylesheet, the prose styles defeat them.

Your best bet if you need utilities to override prose styles is to enable the important option in Tailwind:

https://tailwindcss.com/docs/configuration/#important

This is perfectly reasonable and not an anti-pattern or anything, utilities in Bootstrap are !important by default for example 👍

from tailwindcss-typography.

You could add a class to your .prose element and use the following CSS.

.prose.lettuce h1 {
    color: green;
}

from tailwindcss-typography.