Tailwind CSS align text in center of border on element

Question

I am trying to use Tailwind CSS to align some text within the border of another element, so that the border around my element draws a perimeter around the element, and has a break with the text in the center top of the border.

This is being done within a React component.

I am very new to Tailwind CSS. So new, in fact, that my desired goal comes from the following StackOverflow Question, but the solutions provided there do not appear to work.

I have tried the following:

• Adding mt-5 or pd-5 to both the class for the h2 and span elements for my label, in an effort to add a margin to move the label down into the border, but this does not seem to work.
• Wrapping the h2 element containing the span element in a div and applying mt-5 or pd-5 to that, but that also did not work.
• I've also tried editing the margin in-browser via the Chrome Development tools, but that did not help.

My Code:

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

The leading-border-text TailwindCSS class is one that I have defined in my tailwind.config.js to simply add a custom line height of 0.1.

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

This is what my code currently renders:

And I'd like for that text, My desired label to be in-line with the border just below it.

What am I doing wrong?

Answer 1

I would absolutely position the label in a relative parent element like so:

<script src="https://cdn.tailwindcss.com"></script>


<div class="bg-gray-700 min-h-screen text-gray-400">

  <!-- Skills() -->
  <div class="container mx-auto px-5 py-10">
    <div class="relative rounded-md border border-gray-600">
      <p class="p-3">Some content here.</p>
      <h2 class="absolute flex top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
        <span class="bg-gray-700 px-2 text-sm font-medium">My desired label</span>
      </h2>
    </div>
  </div>
  <!-- Skills() -->

</div>

This way the label will always be centered on the top line of the relative parent element even if its size changes.

Answer 2

After some more thought, I came up with a solution to my own question.

For some reason that is not immediately clear to me, adding mt-5 did not move the label down but adding a negative margin-bottom class, in my case -mb-2, did. I would love it if someone could explain why this is the case.

My solution code:

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 -mb-2 pr-2 pl-2">
                        <span className="bg-gray-900 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>
    );
}

What my solution code renders: