如何在Tailwind中设置输入框占位符的垂直对齐？

你搞混属性了——Tailwind里的text-start/text-end本来就是控制水平对齐的，和text-left/text-right效果一致，根本不是用来做垂直对齐的。要实现占位符的垂直位置调整，得用垂直方向的控制属性。

问题根源 #

你的第三个输入框高度设为h-[98px]，但行高leading-[15px]和默认内边距p-2让占位符默认垂直居中。要改成顶部或底部对齐，得调整内边距、行高或者对齐属性。

具体方案 #

根据你想要的对齐方向修改第三个输入框的类：

1. 占位符顶部对齐

两种方式任选其一：

• 用placeholder:align-top强制占位符顶部对齐：

<input class="placeholder:align-top placeholder-Eerie-Black text-[13px] font-normal tracking-[0px] leading-[15px] bg-Amber border-2 border-opacity-50 border-Eerie-Black rounded-lg h-[98px] p-2 text-start" placeholder="请提供尽可能详细的信息，谢谢*">

• 调整内边距，去掉底部内边距，只保留顶部和水平内边距：

<input class="placeholder-Eerie-Black text-[13px] font-normal tracking-[0px] leading-[15px] bg-Amber border-2 border-opacity-50 border-Eerie-Black rounded-lg h-[98px] px-2 pt-2 pb-0 text-start" placeholder="请提供尽可能详细的信息，谢谢*">

2. 占位符底部对齐

同样两种方式可选：

• 用placeholder:align-bottom强制底部对齐：

<input class="placeholder:align-bottom placeholder-Eerie-Black text-[13px] font-normal tracking-[0px] leading-[15px] bg-Amber border-2 border-opacity-50 border-Eerie-Black rounded-lg h-[98px] p-2 text-start" placeholder="请提供尽可能详细的信息，谢谢*">

• 调整内边距，去掉顶部内边距，只保留底部和水平内边距：

<input class="placeholder-Eerie-Black text-[13px] font-normal tracking-[0px] leading-[15px] bg-Amber border-2 border-opacity-50 border-Eerie-Black rounded-lg h-[98px] px-2 pt-0 pb-2 text-start" placeholder="请提供尽可能详细的信息，谢谢*">

额外提示 #

如果需要更精细的垂直位置控制，也可以给占位符添加placeholder:inline-block配合自定义vertical-align值，或者编写Tailwind自定义工具类，但上面的方法足够解决你的需求。

内容的提问来源于stack exchange，提问作者Fuaad