Estoy tratando de usar Tailwind CSS para alinear un texto dentro del borde de otro elemento, de modo que el borde alrededor de mi elemento dibuje un perímetro alrededor del elemento y tenga una ruptura con el texto en la parte superior central del borde.

Esto se está haciendo dentro de un componente React.

Soy muy nuevo en Tailwind CSS. Tan nuevo, de hecho, que mi objetivo deseado proviene de la siguiente Pregunta de StackOverflow , pero las soluciones proporcionadas allí no parecen funcionar.

He probado lo siguiente:

• Agregar mt-5 o pd-5 a la clase para los elementos h2 y span para mi etiqueta, en un esfuerzo por agregar un margen para mover la etiqueta hacia abajo en el borde, pero esto no parece funcionar.
• Envolviendo el elemento h2 que contiene el elemento span en un div y aplicando mt-5 o pd-5 a eso, pero eso tampoco funcionó.
• También intenté editar el margen en el navegador a través de las herramientas de desarrollo de Chrome, pero eso no ayudó.

Mi código:

 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> ); }

La clase TailwindCSS leading-border-text inicial es una que he definido en mi tailwind.config.js para simplemente agregar una altura de línea personalizada de 0.1.

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

Esto es lo que mi código representa actualmente:

Y me gustaría que ese texto, My desired label esté en línea con el borde justo debajo.

¿Qué estoy haciendo mal?