Tailwind css 边界问题

Question

我正在尝试通过在 tailwind css 中使用 border-b-8 创建具有特定水平长度的边框，但它不起作用。相反，border-b-8 会影响边框的厚度，但不会影响水平长度。

这是我的代码：

<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>

我该怎么做？

Answer 1

顺风边框类只影响边框的粗细或样式。宽度由应用边框的容器的宽度决定。

你可以这样做：

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

在此示例中，边框将采用容器的宽度，设置为 w-1/2 即 50%

Answer 2

我能够通过在包含文本的实际 div 下使用空 div 并将这两个放在具有 flex flex-col class.

示例 React 代码：

<div className='flex flex-col'>
    <div className='py-1 px-3 mx-1 font-bold text-sm text-black'>
        {props.children}
    </div>
    {props.active ? <div className='w-1/2 transform translate-x-1/2 border-b-2 border-black'/> : null}
</div>

上面代码的效果（+几个样式）：

Tailwind css 边界问题

Tailwind css border issue

css

class

border

tailwind-css