html tailwindcss 给 li 标签添加边框

发布于12月24日

我使用tailwindcss来创建一个侧边菜单，我需要一些活动的指示器，所以我需要在<li>标签结束时显示边界.

现在它是这样显示的:

 <div class="bg-bgcolor h-screen">
    <aside class="w-20 bg-white pt-2 rounded-2xl flex flex-col justify-center h-4/5">
        <ul class="flex flex-col items-center">
            <li>
                <div class=" text-white bg-black p-2 rounded-2xl">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}
                        stroke="currentColor" class="w-6 h-6">
                        <path strokeLinecap="round" strokeLinejoin="round"
                            d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
                    </svg>
                </div>
            </li>
        </ul>
    </aside>
</div>

我想这样做

推荐答案

您可以简单地添加以下几个类: 至<li>标签:pr-2 border-black border-r-2

向右填充
边框黑色
右侧边框

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>

  <div class="bg-bgcolor h-screen">
    <aside class="w-20 bg-white pt-2 rounded-2xl flex flex-col justify-center h-4/5">
      <ul class="flex flex-col items-center">
        <li class="pr-2 border-black border-r-2">
          <div class="text-white bg-black p-2 rounded-2xl">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" class="w-6 h-6">
              <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
            </svg>
          </div>
        </li>
      </ul>
    </aside>
  </div>
</body>

</html>

Html相关问答推荐

隐藏滚动条和禁用文本 Select 的CSS技术？

在 bootstrap 中的弹性项之间添加连接行

html tailwindcss 给 li 标签添加边框

推荐答案

Html相关问答推荐

隐藏滚动条和禁用文本 Select 的CSS技术？

在 bootstrap 中的弹性项之间添加连接行

如何在一张表中逃脱边境坍塌--崩溃？

页脚与主要内容重叠

滚动两个不同高度的DIV;一个等待另一个

如何创建剪切到路径的循环文本字幕？

Angular -表和源映射中未显示的数据错误

使用单个粗体字符串向段落添加页边空白

顶部有文字的图像的悬停效果

仅 Select 悬停的级别，而不 Select 其父级或子级

Swift 以编程方式在 YouTube 嵌入视频中进入全屏

按钮位于主 div 的底部而不是内部 Div

如何避免链接在悬停 timeshift 动，同时增加导航栏中的字体大小？

网页设计不适合移动设备

如何调整底部有 SVG 的元素的高度，使其在所有宽度上看起来都不错？

高度大于页面高度和页面大于覆盖的 CSS 覆盖

在 SQL 中合并 HTML 表中的单元格

font awesome 的 CDN/CSS 如何工作？

如何在不删除
标记的情况下加入 HTML 中的段落

有没有办法在 CSS 类子句中指定多个 HTML 元素？