尝试在按钮元素上设置几个 border-left 属性，但它们不显示

Question

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

我正在尝试将按钮样式设置为在按钮处于 focus 状态时显示紫色左边框。

我已经按照 TailwindCSS 文档设置样式，但由于某些原因 UI 没有响应。我已经测试了单个属性，它们都可以工作，但我无法让特定于边框的属性进行协作。

我有一个Codesandbox用于演示

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>

尝试在按钮元素上设置几个 border-left 属性，但它们不显示

Trying to set several border-left properties on a button element when in focus but they don't display

css

reactjs

tailwind-css