Feature Request: Disable the prose classes per element.

[bwklein]

In a section of text, from Markdown (.Content in Hugo), I have a shortcode that is rendering a button. Prose is overriding the styling of the font styling and is underlining the text in the button. I can't seem to override this with TW classes on that element. If I disable prose on the higher-level container, then it works as expected, but then I lose all the nice styling for the rest of the content.

I am suggesting a 'no-prose' class that can disable the application of prose styles to that element and all children of it.

[thetechnaddict]

+1 - similar situation - html page laid out with a button within an article - prose completely overrides any styling on the button. I was looking for a no-prose/prose-off/plain utiity.

[MrMacStripe]

+1
I would like to be able to deactivate prose on an element basis as well, but we also need to take a step back and look at it from the greater perspective:
The basic principle of tailwind CSS is the utility based classes, so it would only make sense to keep the approach in mind while developing plugins. Therefore a utility class should always override a plugin/theme like prose, otherwise it's not a utility class.

Example: If I want a h1 to be text-green-500 for example, it should override the color provided by the prose collection. Right now this does not work.

Let me know what you think :)

[adamwathan]

Therefore a utility class should always override a plugin/theme like prose, otherwise it's not a utility class.

To do this you just need to use the important feature in Tailwind. We have no ability to control how specificity works in CSS in any other way, just how CSS works.

[adamwathan]

@bwklein Definitely agree it would be nice to have some way to "escape" from the prose styling. We've done it many times on our own projects (never loved our solutions though) so it's definitely something we'd like to add.

[thetechnaddict]

Meaning that I can override the prose class by using the important feature then the utility class I wish to apply?

…

On 21 Jul 2020, at 15:55, Adam Wathan ***@***.***> wrote: Therefore a utility class should always override a plugin/theme like prose, otherwise it's not a utility class. To do this you just need to use the important feature in Tailwind. We have no ability to control how specificity works in CSS in any other way, just how CSS works. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#32 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA5KSZ4PF4XHYNNHG27ZXPDR4WM57ANCNFSM4PC3XMEA>.

[joemasilotti]

I solved this by using the most generic important feature in my configuration.

module.exports = {
  important: "html",
  plugins: [
    require("@tailwindcss/typography"),
  ],
};

[reed-jones]

As a (potentially bad) suggestion, I think this can be accomplished using the :not selector. I have tested it locally, and it works where I needed it, removing the underline on anchor tags. in style.js

-        a: {
+        '*:not(.no-prose) a:not(.no-prose)': {
          color: defaultTheme.colors.gray[900],
          textDecoration: 'underline',
        },

This seems like it might be bad from a performance perspective, but I'm not sure the best way to actually test this.

This will disable 'prose' for anchor tag if itself, or any parent has the no-prose class.

[sitefinitysteve]

For me I have GIST script embed links in my markdown, when it renders the prose styling kinda messes it up a bit. But yeah the ability to turn it off in places would be super handy.

[JasonEtco]

I tried doing this:

    typography: {
      default: {
        css: {
          pre: {},
        }
      }
    }

I was not surprised to see that it didn't work 😅 maybe we could do pre: false to disable any .prose pre styling?

Edit: it looks like this does work:

typography: {
  default: {
    css: {
      pre: false,
      code: false,
      'pre code': false,
      'code::before': false,
      'code::after': false
    }
  }
}

[tomphilpotts]

@JasonEtco agree with this. I need to disable the default styling of ul and ol due to conflicts with wordpress!

[adamwathan]

@tomphilpotts You can do that already by following the example in @JasonEtco's comment 👍

[drevantonder]

Yes, this would be nice. Ran into this issue when using a Vue component inside of markdown with the Nuxt,js content module. Ended up having to do the same as @joemasilotti and using important: "html"