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

This is my code in 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>

How can I make the radio choice from right to left?

CodePudding user response：

Make just one div as a parent of the input field and the label. Then give the parent div these classes: flex flex-row-reverse 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>