Remove heading abstraction

Author: philipp-spiess

src/components/heading.tsx

@@ -1,4 +1,3 @@
-import { H3 } from '@/components/heading';
 import { CodeExampleStack } from "@/components/code-example";
 
 export const title = "Functions and directives";
@@ -8,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:
 
@@ -17,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:
 
@@ -44,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:
 
@@ -55,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`:
 
@@ -68,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:
 
@@ -86,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:
 
@@ -99,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:
 
@@ -123,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.
 
@@ -167,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:
 
@@ -190,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:
 
@@ -227,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:
 
@@ -238,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:
 
@@ -249,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: