Javascript Tailwind CSS 在元素边框的中心对齐文本

我试图使用tailwind CSS在另一个元素的边框内对齐一些文本，这样我的元素周围的边框在元素周围绘制一个周长，并与边框中心顶部的文本有一个中断.

这是在React组件内完成的.

我对Tailwind CSS非常陌生.事实上，这是如此之新，以至于我想要的目标来自following StackOverflow Question人，但那里提供的解决方案似乎不起作用.

我try 了以下方法:

• 为我的标签的h2和span元素向类中添加mt-5或pd-5，以便添加一个边距，将标签向下移动到边框中，但这似乎不起作用.
• 将包含span个元素的h2个元素包装在div中，并将mt-5或pd-5应用于该元素，但这也不起作用.
• 我也try 过通过Chrome开发工具在浏览器中编辑页边空白，但没有帮助.

我的代码:

export default function Skills() {
    return (
        <section id="skills">
            <div className="container px-5 py-10 mx-auto">
                <div className="pt-3">
                    <h2 className="w-full text-center leading-border-text mt-5">
                        <span className="text-sm font-medium">My desired label</span>
                    </h2>
                    <div className="flex flex-wrap px-5 pb-5 pt-4 border-b border-t border-r border-l border-gray-600 rounded-md">
                        Some content here.
                    </div>
                </div>
            </div>
        </section>
    );
}

leading-border-text TailwindCSS类是我在tailwind.config.js中定义的一个类，它只需添加0.1的自定义线条高度.

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      lineHeight: {
        'border-text': '0.1'
      }
    },
  },
  plugins: [],
}

这是我的代码当前呈现的内容:

我希望文本，My desired label与它下方的边界对齐.

我做错了什么？