not-prose does not work in @apply

[IzakJackson]

What version of @tailwindcss/typography are you using?

v0.5.0

What version of Node.js are you using?

v14.17.0

What browser are you using?

Chrome

What operating system are you using?

Windows 10

Reproduction repository

https://play.tailwindcss.com/Enkf1N1gI6?file=css

Describe your issue

Console error when using not-prose in css with @apply:

The 'not-prose' class does not exist. If 'not-prose' is a custom class, make sure it is defined within a '@layer' directive.

[adamwathan]

Hey! This is by design in a roundabout way, we define not-prose as an attribute selector [class~=“not-prose”] to make sure using it doesn’t cause Tailwind to generate the CSS for every other rule that uses it, even if you don’t need those rules. For example using not-prose would cause all of the prose-xl rules to always be generated even if you weren’t using them.

Can you describe the real world use case here? Happy to offer some alternatives. In general I deeply discourage @apply and regret ever adding it to the framework, so basically no chance of investing into making it do any more than it currently does.

[IzakJackson]

Hey Adam, so I use Ghost for my blog and then prose to style the blog content. One of the downsides to Ghost is that the blog cards need to be styled through the CSS stylesheet and cannot be done on the component. To get around this I use @apply to style the components classes. With the cards rendering inside <div class="prose"></div>, the prose styling can interfere with the cards styling.

[IzakJackson]

A quick example, Ghost has the ability to have two blockquote styles, with the second applied via a class:

<blockquote class="kg-blockquote-alt">This is another test</blockquote>

So to style it I am using @apply:

.kg-blockquote-alt {
  @apply px-0 py-10 text-xl italic font-bold leading-7 text-center text-orange-500 before:!border-transparent;
}

Unfortunately, it doesn't hide the border added by prose.

EDIT:

Just realises I'm being an idiot and don't need the before modifier 🙄

[adamwathan]

Thank you for the context! Where does the class kg-blockquote-alt come from? Is it something you can change?

Maybe the best solution here is an option in the typography plugin to provide a list of classes that should act as not-prose?

module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/typography')({
      skip: ['.kg-blockquote-alt']
    })
  ]
}

[RobinMalfait]

Hey! Doing a big GitHub clean-up this week so if this is still relevant for your use case please open a new discussion where we can discuss the exact use case and the options we want to provide.

The original issue where @apply doesn't work for not-prose is by design, therefore a new issue isn't necessary.

[taismassaro]

hey @adamwathan, I've got another use case for this that I'm trying to find a work around.

I use mdsvex to render markdown in a svelte application and because of the tailwind reset, the only way I found to properly render the markdown is by adding prose to the parent component. the issue is that prose styles now overwrite the css used for syntax highlighting the code blocks in my markdown files even though I'm importing this css file after the one that declares tailwind.

do you have any recommendations on how to get around here?

[davemac]

Would be great to be able to do this:

Thank you for the context! Where does the class kg-blockquote-alt come from? Is it something you can change?

Maybe the best solution here is an option in the typography plugin to provide a list of classes that should act as not-prose?

module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/typography')({
      skip: ['.kg-blockquote-alt']
    })
  ]
}

[federicocappellotto97]

Is the skip option has been implemented?