当焦点集中时，尝试在按钮元素上设置几个边框左属性，但它们不显示。

Question

我正在使用TailwindCSS并为每个菜单项构建一个带有按钮的菜单组件。

当按钮处于focus状态时，我尝试设置按钮样式以显示紫色的左边框。

我已经按照TailwindCSS文档设置了样式，但由于某种原因，UI没有响应。我测试过单个属性，它们都可以工作，但是我不能让边界特定的属性进行合作。

我有一个码箱演示

import React from "react";

const MenuItem = ({ feature, idx }) => {
  return (
    <div className="ml-6 active:border-l-8 border-purple600" key={idx}>
      <button className="focus:outline-none focus:border-l-6 focus:border-violet-600">
        <h4 className="sticky top-0 text-black">{feature.featureCategory}</h4>
      </button>
      {feature.featureTypes.map((x, idx) => {
        return (
          <h6 className="pt-4 text-black ml-8" key={idx}>
            {x.featureType}
          </h6>
        );
      })}
    </div>
  );
};

export default MenuItem;

Answer 1

您使用的代码有几个问题。

• 您正在通过CDN引入的TailWind包严重过时了。
• 6不是TailWind中边框宽度的默认选项，因此无法通过CDN获得。

确保您使用的是更最新版本的TailWind。然后，将6作为边框宽度的选项添加到您的配置文件中，或者将其添加为生成的样式。

示例：https://play.tailwindcss.com/DcVZLcEvqr

​

<script src="https://cdn.tailwindcss.com"></script>

<button class="focus:outline-none focus:border-l-[6px] focus:border-violet-600">Example Button</button>

​