如何在 Tailwind CSS 中通过边距填充更改占位符位置？

Question

我想更改占位符文本的位置，例如margin-left: 10px和padding-left: 4px in Tailwind CSS.

\n

<input type="text" name="name" placeholder="\xe0\xa6\xaa\xe0\xa7\x81\xe0\xa6\xb0\xe0\xa6\xbe\xe0\xa6\xa4\xe0\xa6\xa8 \xe0\xa6\xaa\xe0\xa6\xbe\xe0\xa6\xb8\xe0\xa6\x93\xe0\xa6\xaf\xe0\xa6\xbc\xe0\xa6\xbe\xe0\xa6\xb0\xe0\xa7\x8d\xe0\xa6\xa1 \xe0\xa6\xa6\xe0\xa6\xbf\xe0\xa6\xa8"  className=" placeholder-gray-500 placeholder-py-4 bg-red-400  focus:outline-none border rounded-xl h-12 w-160" />\n

\n

Answer 1

您可以使用 Tailwindplaceholder:伪类设置占位符的样式（请参阅：https ://tailwindcss.com/docs/hover-focus-and-other-states#placeholder-text ）。

\n

然而，填充和边距设置似乎不能直接在占位符上工作，即使placeholder:text-gray-500将应用类似的类。您可以改为填充输入字段 ( pl-[14px])，这通常更合适，因为用户输入的文本将替换占位符。

\n

<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="\xe0\xa6\xaa\xe0\xa7\x81\xe0\xa6\xb0\xe0\xa6\xbe\xe0\xa6\xa4\xe0\xa6\xa8 \xe0\xa6\xaa\xe0\xa6\xbe\xe0\xa6\xb8\xe0\xa6\x93\xe0\xa6\xaf\xe0\xa6\xbc\xe0\xa6\xbe\xe0\xa6\xb0\xe0\xa7\x8d\xe0\xa6\xa1 \xe0\xa6\xa6\xe0\xa6\xbf\xe0\xa6\xa8" />\n

\n

您可以在此处查看和调整工作示例：https://play.tai​​lwindcss.com/v7HJ30jXga

\n