Added anchors to custom headings

[rozsazoltan]

Fixes: #2240

In the spirit of reusability, I declared a new component called Heading. You need to specify the level (between 1 and 6), the ID (which is mandatory), and the content of the element. With this in place, I also declared H2 through H6 elements. Thus, instead of:

<h3 id="import-directive">@import</h3>

• Preview

you can use:

<H3 id="import-directive">@import</H3>

• Preview

what will be:

<h3 id="import-directive">
  <a href="#import-directive" class="anchor">@import</a>
</h3>

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
tailwindcss-com	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 12, 2025 2:14pm

[philipp-spiess]

@rozsazoltan There's another place right now where we just add that <a> tag manually: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/responsive-design.mdx?plain=1#L476-L478 I think we should just go ahead and do that instead of adding a heading component. It also seems that the anchor class isn't really necessary: https://tailwindcss.com/docs/responsive-design#using-arbitrary-container-query-values

[rozsazoltan]

Ah, indeed, that slipped my attention. Thanks for the update!