tailwindCss：如何使用 lg-px-4答案

【问题标题】：tailwindCss : how to use lg-px-4tailwindCss：如何使用 lg-px-4
【发布时间】：2021-07-04 06:15:30
【问题描述】：

我只想将 px-4 用于页脚

lg:px-4

但它不起作用

<footer class="footer py-5 text-white bg-gray-800">
<div class="flex flex-col  items-center justify-between lg:flex-row  max-w-6xl mx-auto 
lg:space-y-0 space-y-3">
<div class="space-x-4  lg:px-4">
<a href="#" target="_blank"><i class="icon-brand-instagram text-lg  text-white text-opacity-75  text-md hover:text-white"></i></a>
</div>
</div>
</footer>

My sample image

【问题讨论】：

可能你的屏幕没有超过1024px

标签： tailwind-css

【解决方案1】：

px 将指定水平填充

而lg指定响应式屏幕的断点

lg = 1024px @media (min-width: 1024px) { ... }

它不起作用可能是因为您的屏幕尺寸。尝试在 chrome 的开发工具中打开它并更改屏幕尺寸并将其设置为低于/高于 1024。它会工作

【讨论】：

【解决方案2】：

根据official 文档，lg 前缀值适用于大于 1024 像素的屏幕。因此，如果您的屏幕尺寸小于 1024 像素，您可能看不到效果。在浏览器中快速缩小可以判断是否应用了填充。

您也可以在tailwind.config.js 文件中使用custom breakpoints 更改此默认值

【讨论】：