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

Question

这是我在 html + tailwind 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这些类：flexflex-row-reverseitems-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>

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

How can I make a radio button RTL in Tailwind CSS?

html

css

arabic

right-to-left

tailwind-css