How to change placeholder position by margin padding in Tailwind CSS?-CodePudding

I want to change the position of placeholder text's position like margin-left: 10px and padding-left: 4px in Tailwind CSS.

<input type="text" name="name" placeholder="পুরাতন পাসওয়ার্ড দিন"  className=" placeholder-gray-500 placeholder-py-4 bg-red-400  focus:outline-none border rounded-xl h-12 w-160" />

CodePudding user response：

You can style the placeholder using the Tailwind placeholder: pseudo-class (see: https://tailwindcss.com/docs/hover-focus-and-other-states#placeholder-text ).

However, padding and margin settings don't seem to work directly on the placeholder even though classes like placeholder:text-gray-500 will be applied. You could instead pad the input field (pl-[14px]), which is usually more appropriate since user-entered text will replace the placeholder.

<input className="placeholder:text-gray-500 pl-[14px] focus:outline-none border border-gray-500 rounded-xl h-12 w-160" type="text" name="name" placeholder="পুরাতন পাসওয়ার্ড দিন" />

You can see and tweak a working example here: https://play.tailwindcss.com/v7HJ30jXga

CodePudding user response：

Try this

@layer utilities {
  .placeholder-style::placeholder {
     padding: 5px 12px;
     margin: 5px;
  }
}

<input type="text"  />