Tailwind CSS边框问题答案

【问题标题】：Tailwind css border issue [closed]Tailwind CSS边框问题
【发布时间】：2021-04-14 13:00:13
【问题描述】：

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

【问题讨论】：

到目前为止你尝试过什么？我们可以看看你的代码吗？
<h2 class="text-blue-500 sm:text-3xl border-b-8 font-semibold pt-8 mb-4 bd"> My Skills </h2>

【解决方案1】：

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

你可以这样做：

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

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

【讨论】：

我这样做了，边框最终占据了页面宽度的一半。我认为这是顺风 css 的一个限制：无法设置具有特定宽度的边框底部。我使用常规 css 来实现我想要的 .header-skills:after { display: block; height: 2px; width: 100px; content: ""; margin: 0 auto; background-color: #116d97; margin-top: 20px; margin-bottom: 20px; }

【解决方案2】：

我能够单独使用 Tailwind 做到这一点，方法是在包含文本的实际 div 下使用一个空的 div，并将这两个放在具有 flex flex-col 类的父 div 中。

示例反应代码：

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

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

【讨论】：