Tailwind中border-b类边框不显示，如何仅设置元素底部边框？

我有一个div元素，用以下React代码设置样式：

<div className='w-full flex flex-row items-center border-blue-100 border-b'>

使用这段代码时，底部边框无法显示。

只有添加border-solid类才能让底部边框以1px宽度显示，但添加该类后其他边的边框也会出现：

请问如何仅为元素设置底部边框？

解决方案 #

你需要为底部边框单独指定样式类型，而非给整个元素添加border-solid。Tailwind CSS提供了单一边框的样式类border-b-solid，将其加入className即可：

<div className='w-full flex flex-row items-center border-blue-100 border-b border-b-solid'>

也可以用更紧凑的写法，直接组合底部边框的宽度、样式与颜色类：

<div className='w-full flex flex-row items-center border-b-1 border-b-solid border-b-blue-100'>

注：默认情况下border-b已包含1px宽度，因此第一种写法足以解决问题。

原理说明：border-b仅设置底部边框的宽度，border-blue-100是为所有边框设置颜色，但边框样式默认是none。通过border-b-solid单独给底部边框指定实线样式，就不会触发其他边的边框显示。

内容的提问来源于stack exchange，提问作者Linda G