我可以为左边框颜色和实际边框设置不同的颜色吗

Question

当我为 border-left 分配 green 颜色时，为整个边框分配相同的绿色。但我希望 border-left 为绿色，border 为黑色，如下图所示。

这是我的代码（我用的是Tailwindcss）

<div className="border rounded flex items-center border-l-4 border-green">
    

  <div className="">
        <CalendarIcon className="h-4 mx-2" />
      </div>
      <div className="flex flex-col -space-y-1 p-1 ">
        <div className="text-xs flex text-gray-dark flex-start">
          <p>Checkout</p>
        </div>
        <DatePicker
          className=" border-none  font-bold h-1  rounded text-sm  outline-none  focus:ring-0 bg-transparent"
          selected={endDate}
          onChange={(date) => setEndDate(date)}
          selectsEnd
          startDate={startDate}
          endDate={endDate}
          minDate={startDate}
          dateFormat="MMMM d, yyyy "
        />
      </div>
    </div>

这是输出

Answer 1

我不确定我是否答对了问题。但是你不能只使用 border-l-green-500 或类似的东西吗？它在顺风游乐场对我有用。

我可以为左边框颜色和实际边框设置不同的颜色吗

Can I set different color for border-left color and actual border

css

reactjs

tailwind-css