如何在尾风CSS中制作单选按钮RTL？

Question

这是我在html +顺风css中的代码：

​

<div className="flex justify-center">
  <div className="flex flex-col justify-center items-start gap-5">
    <div className="form-check">
      <input
        className="form-check-input appearance-none rounded-full h-7 w-7 border-4 border-[#5F6368] bg-[#C4C4C4] hover:shadow-lg hover:shadow-[#5F6368] hover:border-[#3B52B5] checked:bg-[#7EABFF] checked:border-[#3B52B5] focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-5 cursor-pointer"
        type="radio"
        name="flexRadioDefault"
        id="flexRadioDefault1"
      />
      <label
        className="form-check-label text-3xl text-right font-bold text-gray-800"
        htmlFor="flexRadioDefault1"
      >
        الخيار 1
      </label>
    </div>
  </div>
</div>

​

我怎样才能从右到左作出无线电选择？

Answer 1

只将一个div作为输入字段和标签的父级。然后给父div以下类：flex items-center

<div className="form-check flex flex-row-reverse items-center">
  <input
    className="form-check-input appearance-none rounded-full h-7 w-7 border-4 border-[#5F6368] bg-[#C4C4C4] hover:shadow-lg hover:shadow-[#5F6368] hover:border-[#3B52B5] checked:bg-[#7EABFF] checked:border-[#3B52B5] focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-5 cursor-pointer"
    type="radio"
    name="flexRadioDefault"
    id="flexRadioDefault1"
  />
  <label
    className="form-check-label text-3xl text-right font-bold text-gray-800"
    htmlFor="flexRadioDefault1"
  >
    الخيار 1
  </label>
</div>