Trouble with Anchors

[JDubbTX]

I would like to have Anchor links on all headings H2 and later, and I would like it to look like Github, with the link icon that appears to the left of the heading once you hover. I also have markdownitEmoji plugin, which works fine.

Here is what I have done in .eleventy.js:

const markdownIt = require('markdown-it')
const markdownItEmoji = require('markdown-it-emoji')
const markdownItAnchor = require('markdown-it-anchor');

	const markdownItOptions = {
		html: true,
		breaks: true,
		linkify: false,
		typographer: true,
	}

	const permalinkOptions = {
        Symbol: `
		  <span class="visually-hidden">Jump to heading</span>
		  <span aria-hidden="true">🔗</span>
	    `,
		placement: 'before'
	}

	const markdownItAnchorOptions = {
    	level: 2, // minimum level header -- anchors will only be applied to h2 level headers and below but not h1
		permalink: markdownItAnchor.permalink.linkInsideHeader(permalinkOptions)
	}

	eleventyConfig.setLibrary("md", markdownIt(markdownItOptions)
		.use(markdownItAnchor, markdownItAnchorOptions)
		.use(markdownItEmoji))

However, I'm getting a # instead of a link, and the # is always visible. How do I change this to make it have a link, which only appears on hover?

Here is the generated HTML:

  <p><em>🔨 this post is under construction</em></p>
<h2 id="why-use-git" tabindex="-1"><a class="header-anchor" href="#why-use-git">#</a> Why use Git</h2>
<p>This is some text</p>
<h2 id="why-use-git-in-vs-code" tabindex="-1"><a class="header-anchor" href="#why-use-git-in-vs-code">#</a> Why use Git in VS Code</h2>
<p>More text</p>
<h2 id="requirements" tabindex="-1"><a class="header-anchor" href="#requirements">#</a> Requirements</h2>

[JDubbTX]

I should also mention that I am also using tailwind css. I'm wondering if there is something conflicting?