Tailwind CSS中如何实现元素仅在移动端视图下居中？

问题原因 #

Tailwind CSS 的所有断点都是最小宽度匹配规则，不带断点前缀的工具类默认会在所有视口尺寸下生效，没有最大宽度限制。你之前的两种写法都只定义了小屏下的居中规则，没有在大于等于md断点的尺寸下重置place-self属性，所以居中效果会一直存在。

解决方法 #

你只需要在md断点处添加place-self的重置规则，覆盖小屏的居中设置即可，如果你要实现「仅小于md断点的移动端居中，md及以上尺寸恢复默认/指定对齐方式」，正确写法如下：

<div className='place-self-center md:place-self-auto md:col-start-2 md:col-end-2 p-2'>

补充说明 #

如果place-self-auto不符合你大屏场景下的对齐需求，可以根据实际布局需要替换为其他有效值，比如md:place-self-start、md:place-self-end、md:place-self-stretch等。

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