仅当使用 Tailwind css 选择项目时，如何制作带有圆角的菜单？答案

【问题标题】：How to make a menu with rounded corners only when item is selected with Tailwind css?仅当使用 Tailwind css 选择项目时，如何制作带有圆角的菜单？
【发布时间】：2022-02-11 15:15:03
【问题描述】：

我正在尝试使用 Tailwind CSS： side menu when page is selected and opened

但是，目前，我只能做到这一点： what I managed to do

如您所见，圆边消失了，只有在被选中时变暗，当用户在页面上时再次变亮。

这是我的 Tailwind CSS 代码：

<div className="flex flex-col gap-2 pl-4 pt-4 bg-gray-500 h-screen w-52">
      <h1 className="text-salmon p-2 font-bold text-xl">My Website Admin</h1>
      <a href="/alltrips"
        className="flex flex-row gap-1 w-52 rounded-l-full p-2 text-white focus:text-salmon focus:bg-gray-700">
          <svg
            class="w-6 h-6"
            fill="currentColor"
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
              clip-rule="evenodd"
            ></path>
          </svg>
          <h3>Parcours</h3>
        </a>
</div>

有谁知道我可以做些什么来实现这种风格？

【问题讨论】：

标签： css tailwind-css

【解决方案1】：

在您的代码中将 rounded-l-full 更改为 rounded-full。

根据Tailwind CSS Documentation，rounded-l-full 只对元素的一侧进行舍入，因此另一侧不会舍入。

代码：

<div className="flex flex-col gap-2 pl-4 pt-4 bg-gray-500 h-screen w-52">
      <h1 className="text-salmon p-2 font-bold text-xl">My Website Admin</h1>
      <a href="/alltrips"
        className="flex flex-row gap-1 w-52 rounded-full p-2 text-white focus:text-salmon focus:bg-gray-700">
          <svg
            class="w-6 h-6"
            fill="currentColor"
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
              clip-rule="evenodd"
            ></path>
          </svg>
          <h3>Parcours</h3>
        </a>
</div>

结果：

Result

【讨论】：