Tailwind 断点无法在小屏幕及以上屏幕上指定宽度答案

【问题标题】：Tailwind breakpoint not working to specify width on small screens and aboveTailwind 断点无法在小屏幕及以上屏幕上指定宽度
【发布时间】：2022-11-02 23:00:09
【问题描述】：

我有一个小的 flex 容器，里面有一个文本和两个按钮

在移动设备上，我希望每个元素都堆叠成列，并且按钮占据容器的整个宽度。

在更宽的屏幕上，它应该都在同一行，文本在左边，两个按钮在右边，中间有一些间距。

但是，在更宽的屏幕上，根据需要进行移动布局后，右侧的按钮变得有点过宽，并且它们之间的间距消失了，使它们相互粘在一起。

这是代码（大部分情况下我只是在调整，因为它是由我团队中的其他人编写的）：

<div class="align-center sm:h-50 flex-col sm:flex-row py-30 sm:py-0 flex items-center border-b border-gray-50 px-10 sm:px-30 ">
<div style="flex-basis: 70%; class=">
<p class="text-md p-0 mt-0">Baby Baby</p>
</div>
<div style="flex-basis: 15%;" class="w-full">
<a class="outline-none focus:outline-none flex sm:w-100 text-xs rounded-full bg-primary-400 text-white p-5 focus:outline-none no-underline"">
<p class="font-pt-sans font-bold m-auto">Send e-mail</p>
</a>
</div>
<div style="flex-basis: 15%;" class="w-full">
<button class="w-full outline-none focus:outline-none flex flex-col flex-none  flex-col text-xs rounded-full text-gray-400 border p-5" type="button">
<p class="font-pt-sans font-bold m-auto">Copy link</p>
</button>
</div>
</div>

我发现在更宽的屏幕上布局错误的罪魁祸首是sm:w-100：

<a class="outline-none focus:outline-none flex sm:w-100 text-xs rounded-full bg-primary-400 text-white p-5 focus:outline-none no-underline"">

我需要w-100 仅适用于小屏幕及以上。但由于某种原因它根本不应用它，它工作的唯一方法是删除sm 断点。但是它也将此宽度应用于移动设备，这是我不想要的。

我在这里想念什么？我已经阅读了文档和其他类似的问题，但无法弄清楚。谢谢你。

【问题讨论】：

标签： tailwind-css responsive breakpoints

【解决方案1】：

那里有太多不需要的代码来实现你想要的。

您可以通过大量简化来做到这一点，这就是您的做法：

<div class="flex w-full flex-col items-center justify-center space-y-4 space-x-0 md:flex-row md:space-x-4">
  <p class="flex-1 text-center md:text-start">Baby Baby</p>
  <button class="font-pt-sans w-fullitems-center flex w-full justify-center rounded-full border p-5 text-xs font-bold text-gray-400 outline-none focus:outline-none md:w-auto" type="button">Send Email</button>
  <button class="font-pt-sans w-fullitems-center flex w-full justify-center rounded-full border p-5 text-xs font-bold text-gray-400 outline-none focus:outline-none md:w-auto" type="button">Copy link</button>
</div>

你可以在这里玩：https://play.tailwindcss.com/zA2Rn1LYEv?size=476x720

另外请在此处阅读有关断点和响应式设计的信息：https://tailwindcss.com/docs/responsive-design#overview

这是它在大屏幕上的样子：

这是它在小屏幕上的外观：

【讨论】：