Added anchors to custom headings (#2241)

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:

```html
<h3 id="import-directive">@import</h3>
```
*
[Preview](https://tailwindcss.com/docs/functions-and-directives#import-directive)

you can use:
```html
<H3 id="import-directive">@import</H3>
```
*
[Preview](https://tailwindcss-com-git-fork-rozsazoltan-fix-he-f001db-tailwindlabs.vercel.app/docs/functions-and-directives#import-directive)

what will be:
```html
<h3 id="import-directive">
  <a href="#import-directive" class="anchor">@import</a>
</h3>
```

---------

Co-authored-by: Philipp Spiess <hello@philippspiess.com>

Author: rozsazoltan

src/docs/functions-and-directives.mdx

@@ -7,7 +7,9 @@ export const description = "A reference for the custom functions and directives
 
 Directives are custom Tailwind-specific [at-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule) you can use in your CSS that offer special functionality for Tailwind CSS projects.
 
-<h3 id="import-directive">@import</h3>
+<h3 id="import-directive">
+  <a href="#import-directive">@import</a>
+</h3>
 
 Use the `@import` directive to inline import CSS files, including Tailwind itself:
 
@@ -16,7 +18,9 @@ Use the `@import` directive to inline import CSS files, including Tailwind itsel
 @import "tailwindcss";
 ```
 
-<h3 id="theme-directive">@theme</h3>
+<h3 id="theme-directive">
+  <a href="#theme-directive">@theme</a>
+</h3>
 
 Use the `@theme` directive to define your project's custom design tokens, like fonts, colors, and breakpoints:
 
@@ -43,7 +47,9 @@ Use the `@theme` directive to define your project's custom design tokens, like f
 
 Learn more about customizing your theme in the [theme variables documentation](/docs/theme).
 
-<h3 id="source-directive">@source</h3>
+<h3 id="source-directive">
+  <a href="#source-directive">@source</a>
+</h3>
 
 Use the `@source` directive to explicitly specify source files that aren't picked up by Tailwind's automatic content detection:
 
@@ -54,7 +60,9 @@ Use the `@source` directive to explicitly specify source files that aren't picke
 
 Learn more about automatic content detection in the [detecting classes in source files documentation](/docs/detecting-classes-in-source-files).
 
-<h3 id="utility-directive">@utility</h3>
+<h3 id="utility-directive">
+  <a href="#utility-directive">@utility</a>
+</h3>
 
 Use the `@utility` directive to add custom utilities to your project that work with variants like `hover`, `focus` and `lg`:
 
@@ -67,7 +75,9 @@ Use the `@utility` directive to add custom utilities to your project that work w
 
 Learn more about registering custom utilities in the [adding custom utilities documentation](/docs/adding-custom-styles#adding-custom-utilities).
 
-<h3 id="variant-directive">@variant</h3>
+<h3 id="variant-directive">
+  <a href="#variant-directive">@variant</a>
+</h3>
 
 Use the `@variant` directive to apply a Tailwind variant to styles in your CSS:
 
@@ -85,7 +95,9 @@ Use the `@variant` directive to apply a Tailwind variant to styles in your CSS:
 
 Learn more using variants in the [using variants documentation](/docs/adding-custom-styles#using-variants).
 
-<h3 id="custom-variant-directive">@custom-variant</h3>
+<h3 id="custom-variant-directive">
+  <a href="#custom-variant-directive">@custom-variant</a>
+</h3>
 
 Use the `@custom-variant` directive to add a custom variant in your project:
 
@@ -98,7 +110,9 @@ This lets you write utilities `theme-midnight:bg-black` and `theme-midnight:text
 
 Learn more about adding custom variants in the [adding custom variants documentation](/docs/adding-custom-styles#adding-custom-variants).
 
-<h3 id="apply-directive">@apply</h3>
+<h3 id="apply-directive">
+  <a href="#apply-directive">@apply</a>
+</h3>
 
 Use the `@apply` directive to inline any existing utility classes into your own custom CSS:
 
@@ -122,7 +136,9 @@ Use the `@apply` directive to inline any existing utility classes into your own
 
 This is useful when you need to write custom CSS (like to override the styles in a third-party library) but still want to work with your design tokens and use the same syntax you’re used to using in your HTML.
 
-<h3 id="reference-directive">@reference</h3>
+<h3 id="reference-directive">
+  <a href="#reference-directive">@reference</a>
+</h3>
 
 If you want to use `@apply` or `@variant` in the `<style>` block of a Vue or Svelte component, or within CSS modules, you will need to import your theme variables, custom utilities, and custom variants to make those values available in that context.
 
@@ -166,7 +182,9 @@ If you’re just using the default theme with no customizations, you can import
 
 Tailwind provides the following build-time functions to make working with colors and the spacing scale easier.
 
-<h3 id="alpha-function">--alpha()</h3>
+<h3 id="alpha-function">
+  <a href="#alpha-function">--alpha()</a>
+</h3>
 
 Use the `--alpha()` function to adjust the opacity of a color:
 
@@ -189,7 +207,9 @@ Use the `--alpha()` function to adjust the opacity of a color:
 
 </CodeExampleStack>
 
-<h3 id="spacing-function">--spacing()</h3>
+<h3 id="spacing-function">
+  <a href="#spacing-function">--spacing()</a>
+</h3>
 
 Use the `--spacing()` function to generate a spacing value based on your theme:
 
@@ -226,7 +246,9 @@ This can also be useful in arbitrary values, especially in combination with `cal
 
 The following directives and functions exist solely for compatibility with Tailwind CSS v3.x.
 
-<h3 id="config-directive">@config</h3>
+<h3 id="config-directive">
+  <a href="#config-directive">@config</a>
+</h3>
 
 Use the `@config` directive to load a legacy JavaScript-based configuration file:
 
@@ -237,7 +259,9 @@ Use the `@config` directive to load a legacy JavaScript-based configuration file
 
 The `corePlugins`, `safelist`, and `separator` options from the JavaScript-based config are not supported in v4.0.
 
-<h3 id="plugin-directive">@plugin</h3>
+<h3 id="plugin-directive">
+  <a href="#plugin-directive">@plugin</a>
+</h3>
 
 Use the `@plugin` directive to load a legacy JavaScript-based plugin:
 
@@ -248,7 +272,9 @@ Use the `@plugin` directive to load a legacy JavaScript-based plugin:
 
 The `@plugin` directive accepts either a package name or a local path.
 
-<h3 id="theme-function">theme()</h3>
+<h3 id="theme-function">
+  <a href="#theme-function">theme()</a>
+</h3>
 
 Use the `theme()` function to access your Tailwind theme values using dot notation: