prose-invert not working as expected #228

rjgux · 2021-12-17T20:26:32Z

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.

The text was updated successfully, but these errors were encountered:

Karmalakas · 2022-01-08T23:54:22Z

I think invert works only with default - prose prose-invert. If you use any prose-COLOR, invert won't work

liltechnomancer · 2022-02-03T09:09:31Z

I think invert works only with default - prose prose-invert. If you use any prose-COLOR, invert won't work

This is not true, that is why they include all the --tw-prose-invert variables.

Karmalakas · 2022-02-03T10:50:19Z

I'd need to revisit my code now (been a while), but I also couldn't make it work

liltechnomancer · 2022-02-03T19:41:38Z

I could probably get a repository with a minimal reproduction this weekend. I am currently running into this.

mttmzr · 2022-02-11T09:52:22Z

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.

adamwathan · 2022-02-23T17:23:10Z

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.

joshleblanc · 2022-06-14T10:40:10Z

Just in case someone else runs across this, you can temporarily work around this with prose !prose-invert

bb · 2022-08-25T13:16:54Z

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?

leslie555 · 2023-02-17T07:35:28Z

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.

tailwindlabs/tailwindcss-typography#228

sedubois · 2023-05-24T15:27:20Z

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'),
  ]
}

samjowen · 2023-06-24T21:52:16Z

Just in case someone else runs across this, you can temporarily work around this with prose !prose-invert

Thank you.

reinink · 2023-08-30T20:12:55Z

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 👍

iansedano · 2023-10-24T13:15:37Z

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?

ravi-ojha · 2024-04-18T10:08:04Z

@iansedano Put prose-custom before prose prose-invert in your class attr.

For eg: <div class="prose-custom prose prose-invert">

adamwathan mentioned this issue Nov 8, 2022

.prose-invert is declared before and thus overwritten by prose gray scale modifiers tailwindlabs/tailwindcss#9776

Closed

oeyoews added a commit to oeyoews/tiddlywiki-starter-kit that referenced this issue Mar 22, 2023

fix: add ! try to fix invert not wor

38fc2f6

tailwindlabs/tailwindcss-typography#228

steven-tey mentioned this issue Jun 20, 2023

Thinking about adding a dark mode? steven-tey/novel#22

Closed

reinink self-assigned this Aug 30, 2023

reinink mentioned this issue Aug 30, 2023

Fix prose-invert when used with colors in light mode #315

Merged

reinink closed this as completed in #315 Aug 30, 2023

NovaSagittarii mentioned this issue Apr 15, 2024

Nova sagittarii/blog theme bearhack-ucr/bearhack2024#138

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

prose-invert not working as expected #228

prose-invert not working as expected #228

rjgux commented Dec 17, 2021 •

edited

Loading

Karmalakas commented Jan 8, 2022

liltechnomancer commented Feb 3, 2022

Karmalakas commented Feb 3, 2022

liltechnomancer commented Feb 3, 2022

mttmzr commented Feb 11, 2022

adamwathan commented Feb 23, 2022

joshleblanc commented Jun 14, 2022 •

edited

Loading

bb commented Aug 25, 2022

leslie555 commented Feb 17, 2023 •

edited

Loading

sedubois commented May 24, 2023 •

edited

Loading

samjowen commented Jun 24, 2023

reinink commented Aug 30, 2023

iansedano commented Oct 24, 2023

ravi-ojha commented Apr 18, 2024

prose-invert not working as expected #228

prose-invert not working as expected #228

Comments

rjgux commented Dec 17, 2021 • edited Loading

What version of @tailwindcss/typography are you using?

What version of Node.js are you using?

What browser are you using?

What operating system are you using?

Reproduction repository

Describe your issue

Karmalakas commented Jan 8, 2022

liltechnomancer commented Feb 3, 2022

Karmalakas commented Feb 3, 2022

liltechnomancer commented Feb 3, 2022

mttmzr commented Feb 11, 2022

adamwathan commented Feb 23, 2022

joshleblanc commented Jun 14, 2022 • edited Loading

bb commented Aug 25, 2022

leslie555 commented Feb 17, 2023 • edited Loading

sedubois commented May 24, 2023 • edited Loading

samjowen commented Jun 24, 2023

reinink commented Aug 30, 2023

iansedano commented Oct 24, 2023

HTML

Config

ravi-ojha commented Apr 18, 2024

rjgux commented Dec 17, 2021 •

edited

Loading

joshleblanc commented Jun 14, 2022 •

edited

Loading

leslie555 commented Feb 17, 2023 •

edited

Loading

sedubois commented May 24, 2023 •

edited

Loading