dark:prose-invert not included in Tailwind standalone version

[danjac]

What version of @tailwindcss/typography are you using?

Tailwind standalone release v3.0.13

What version of Node.js are you using?

n/a

What browser are you using?

Firefox, Chrome

What operating system are you using?

Linux, Android

Reproduction repository

https://github.com/danjac/jcasts

Describe your issue

The standalone Tailwind which includes typography does not include dark:prose-invert, so all colors are rendered unreadable in dark mode. The current workaround is to provide custom CSS.

e.g

<div class="prose dark:prose-invert">
content...
</div>

[minijoo]

Does this mean prose-invert is unavailable at this moment?

[danjac]

Does this mean prose-invert is unavailable at this moment?

Yes. I have to use workaround in app.css as prose-invert does nothing:

    @media (prefers-color-scheme: dark) {
        .prose {
            color: theme('colors.gray.300') !important;
        }
        .prose ol > li::marker,
        .prose ul > li::marker {
            color: theme('colors.gray.300') !important;
        }
        .prose hr {
            border-color: theme('colors.gray.500') !important;
        }
        .prose a,
        .prose blockquote,
        .prose figcaption,
        .prose pre,
        .prose code,
        .prose {
            color: theme('colors.gray.300') !important;
        }
        .prose strong,
        .prose h1,
        .prose h2,
        .prose h3,
        .prose h4,
        .prose h5 {
            color: theme('colors.gray.200') !important;
        }
    }

[bradlc]

Hey @danjac. prose-invert is included in the standalone CLI. On your site, for example on the credits page, you are reapplying prose at the lg breakpoint, which is wiping out the prose-invert styles. Instead of lg:prose you should use lg:prose-base, as per the "Applying a type scale" documentation:

- <div class="prose dark:prose-invert prose-sm lg:prose break-words">
+ <div class="prose dark:prose-invert prose-sm lg:prose-base break-words">

I hope that helps!

[danjac]

Works beautifully, thank you!

[tsangaris]

I am on NuxtJS version 2.15.6, VueJS 2.6.12 and TailwindCSS v2 and this will not work:

<article class="prose dark:prose-invert prose-lg mx-auto mt-6"> <div v-html="post.content"></div> </article>

Edit: Just checked the documentation about the releases: dark-prose-invert is only available on TailwindCSS 3 and above: