tailwindcss-typography
tailwindcss-typography copied to clipboard
tailwindlabs
prose-invert not working as expected
What version of @tailwindcss/typography are you using?
v0.5.0
What version of Node.js are you using?
v12.0.0
What browser are you using?
Chrome
What operating system are you using?
macOS
Reproduction repository
https://play.tailwindcss.com/vkmcuQsUPz
Describe your issue
I may be misunderstanding how prose-invert works, but in the Tailwind Play example where it's used in combination with a custom color theme (in this case prose-white) the inversed colours are not being applied.
prose-white prose-invert I would expect --tw-prose-body to be set to theme.colors.black.
I think invert works only with default - prose prose-invert. If you use any prose-COLOR, invert won't work
I think invert works only with default -
prose prose-invert. If you use anyprose-COLOR, invert won't work
This is not true, that is why they include all the --tw-prose-invert variables.
I'd need to revisit my code now (been a while), but I also couldn't make it work
I could probably get a repository with a minimal reproduction this weekend. I am currently running into this.
This can be resolved by moving the invert modifier (https://github.com/tailwindlabs/tailwindcss-typography/blob/master/src/styles.js#L923-L943) below all the gray and color modifiers to the end of defaultModifiers in src/styles.js.
Just spent a little time looking into this, don't have a solution yet but wanted to leave some notes for myself so I don't forget:
The root problem here is that when we added prose-invert we sort of always expected it to actually be used as dark:prose-invert, which has a higher specificity than prose-zinc or similar, and therefore triggers the inverted color, even though prose-invert is actually defined earlier in the CSS.
This means that prose-invert doesn't work when used as the default, for example on a dark block in an otherwise light mode site, like bg-black prose-zinc prose-invert.
One possible solution is trying to make sure prose-invert is always last in the CSS output. Another is reworking the variable names so that the color modifiers are setting different variables than the prose-invert class (maybe --tw-prose-normal-body and invert sets --tw-prose-body, and the regular prose class also loads up the defaults to make sure they are applied). I think the second option is maybe "better" but could be a breaking change.
Just in case someone else runs across this, you can temporarily work around this with prose !prose-invert
Thanks for pointing to !, @joshleblanc!
I am using prose dark:prose-invert but it sill does not invert (without exclamation mark) because there's another rule :root .prose overriding both .proseand dark:prose-invert (without !). I have no idea where :root comes from, I'm only specifying prose max-w-full dark:prose-invert.
Maybe specifically adding :root to the invert-rule could solve this issue?
v0.5.9 + tailwindcss v3.2.2 still has this issue. Could someone update the DOC? I spent a couple of hours on it and then find this address.
I tried the suggested !prose-invert workaround but dark mode still doesn't work for me. In the example below, the heading text is invisible in dark mode (same color as background). Am I missing something?
<body class="text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-gray-900">
<article class="prose dark:!prose-invert"> <!-- also tried <article class="prose !prose-invert"> -->
<h1>My Heading</h1>
</article>
</body>
This CSS rule gets applied:
.prose :where(h1):not(:where([class~=not-prose] *)) {
color:var(--tw-prose-headings);
}
.prose {
--tw-prose-headings: #111827;
}
I can't find any code like @media(prefers-color-scheme:dark) { .dark:prose-invert { ... } } in the generated CSS. Isn't there supposed to be something like that?
Using tailwindcss-rails 2.0.29 (corresponding to Tailwind CSS v3.3.2 according to the release note) and the Rails-generated config:
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
content: [
'./public/*.html',
'./app/helpers/**/*.rb',
'./app/javascript/**/*.js',
'./app/views/**/*.{erb,haml,html,slim}'
],
theme: {
extend: {
fontFamily: {
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/aspect-ratio'),
require('@tailwindcss/typography'),
require('@tailwindcss/container-queries'),
]
}
Just in case someone else runs across this, you can temporarily work around this with
prose !prose-invert
Thank you.
Hey folks! Thanks for reporting this issue. I implemented what @adamwathan suggested above in #315, and from my testing this seems to fix this issue without any negative side effects. Hoping to get a new release of the plugin out tomorrow if all goes well 👍
Thank you for this fix! Unfortunately I think I've run into an edge case.
This seems to work for the built-in themes, but not if you work with a custom theme.
Here is a reproduction: https://play.tailwindcss.com/TRN5em5a8E
As a summary of the reproduction linked above:
HTML
<div class="prose prose-invert prose-custom bg-slate-200">
<p>Curabitur blandit tempus ardua ridiculus sed magna. Sed haec quis possit intrepidus aestimare tellus. Quisque ut dolor gravida, placerat libero vel, euismod. Plura mihi bona sunt, inclinet, amari petere vellent.</p>
</div>
Trying to use prose-invert prose-custom classes, where prose-custom is my own color theme.
Config
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
typography: (theme) => ({
custom: {
css: {
'--tw-prose-body': theme('colors.black'),
'--tw-prose-invert-body': theme('colors.white'),
},
},
}),
},
},
plugins: [require('@tailwindcss/typography')],
}
With this config, I'd expect the above HTML to render as white text, but it renders as black text. This seems like the same behavior that the plugin had for all the themes prior to the fix. Perhaps the same thing is happening to the potential custom themes?
@iansedano Put prose-custom before prose prose-invert in your class attr.
For eg: <div class="prose-custom prose prose-invert">
