Can you @apply 'prose h1' somehow?

[hanoii]

I adding prose to some content (not too high because of something like #73 missing) but this is leaving other places where I would like to use it.

At first, I would like to know if there's a way to @apply a prose styling on my own css.

Like:

h1 {
  @apply "prose h1"
}

or something like that.

[pspeter3]

I think most of the prose headings are expressible with Tailwind text sizes, especially now that Tailwind includes default line heights for text sizes. I'd love to see prose match those styles exactly so it's easy to match prose styles with default Tailwind. Maybe this is on @adamwathan's plan for the Prose plugin's Tailwind V2 plan.

[RobinMalfait]

Hey! Thank you for your question!
Much appreciated! 🙏

You can only apply classes. So you could apply @apply prose itself, but that would apply "everything" form the prose class.
If you want to apply some styles to h1 and you want to sync them with prose h1 then you could flip things around:

1. Create custom classes for example my-h1
2. Use this custom class in your non-prose related places
3. Inside the prose config, apply the my-h1

Example: https://play.tailwindcss.com/H8hM5dA5CU?file=css

This is of course a very silly example. But this is one way on how you can "sync" the styles inside prose and non-prose components.

[hanoii]

@RobinMalfait Thanks! I guess I was looking for the other way. Extract the h1 styles from prose into my project so I can use just the prose h1 styles on an h1 and not the rest of the prose classes.

[RobinMalfait]

I see, you can't do that dynamically currently. But you could copy the resulting css and apply it to all h1's if you want to.

[iBobik]

I would like the same for all heading globally, so ideally:

@layer base {
  h1, h2, h3, h4, h5, h6 {
    @apply prose-heading;
  }
}

And sometimes just pinpoint something:

<ul class="prose-ul">
  <li>Example item</li>
  <li>Example item</li>
  <li>Example item</li>
</ul>