Using Tailwind prose on dark background makes text look too dark

Question

Using Tailwind prose on dark background makes text look too dark without manual configuration

TLDR; How do I get prose to work on a dark background?

I have a Site running Sage 10 with Wordpress, where I use TailwindCSS (v3.0.18) for the base styling. The page is not in dark mode, nor should it be. However I have a Footer, that has a dark background, as is quite common with Websites. My issue is that the prose class I add to it, will show the text (etc.) quite dark, not really readable. I want to have prose usable on dark backgrounds too. prose-invert doesn't seem to work. I am not sure if it only works with dark:prose-invert?

I could manually change all the elements within the footer, but I would prefer if Tailwind had a way of handling this witout manual labor.

In the image you can see the left part has prose and ends up dark. The right part does not and keeps looking as it should, but is missing the sizes and all the fancy stuff.

My tailwind.conf.js is setup very minimalistic at this point:

const colors = require('tailwindcss/colors')

module.exports = {
  content: [
    // WP default php files
    './index.php',
    './functions.php',
    './author.php',
    './archive.php',
    './home.php',
    './front-page.php',
    './404.php',
    './search.php',
    './category.php',
    './page.php',
    './single.php',
    './taxonomy.php',
    // END WP default php files
    './resources/views/**/*.php',
    './resources/scripts/**/*.js',
  ],
  theme: {
    extend: {
      colors: {
        primary: colors.indigo,
        secondary: colors.yellow,
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

I compile everything with composer into one CSS file, so Tailwind JIT is in use and scans all the correct files as you can see.

Following is a very minimal example of the compiled HTML (removed a lot of stuff, just for demo purposes):

<footer class="footer bg-stone-800 p-8">
  <div class="container mx-auto">
    <div class="sm:flex gap-x-3 mb-4">                      
      <div class="prose-invert footer__item sm:w-1/4 h-auto">
        <section class="widget block-15 widget_block">
          <h2>Text</h2>
        </section>          
      </div>
    </div>
  </div>
</footer>

Answer 1

In your HTML, where you are declaring the class prose-invert, you need to also use the base class of prose.

So ending up with at least prose prose-invert in your class list.