Search code examples
cssclassbordertailwind-css

Tailwind css border issue

I'm trying to create a border with a specific horizontal length by using border-b-8 in tailwind css but it's not working. Instead, the border-b-8 affects the thickness of the border but not the horizontal length.

Here is my code:

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<h2 class="text-blue-500 sm:text-3xl border-b-8 font-semibold pt-8 mb-4 bd"> My Skills </h2>

How do I do this?

Solution

  • the tailwind border classes only affect the thickness or style of the border. The width is determined by the width of the container that the border is applied to.

    You could do something like:

    <h2 class="w-1/2 border-b-2"> My Skills </h2>

    In this example the border will take on the width of the container, which is set to w-1/2 which is 50%