如何让 Tailwind 网格在 640 像素以下的移动设备上运行？

Question

我的问题是我无法在移动视图中看到我的定价页面。第一行 class 是我正在查看的内容。这是我的代码

<div data-target="pricing.yearlyPlans" class="mt-12 space-y-4 sm:mt-16 sm:space-y-0 sm:grid sm:grid-cols-1 sm:gap-6 md:grid-cols-2 xl:grid-cols-4">
  <%= render 'free_plan' %>
  <% Plan.yearly.sorted.each do |plan| %>
    <%= render layout: "subscriptions/styled_payment", locals: { plan: plan } do %>
      <%= link_to plan.name, new_subscription_path(plan: plan.id), class: "flex items-center justify-center mt-3 px-5 py-3 border border-transparent text-base font-medium rounded-md text-white hover:text-white bg-tertiary-500 hover:bg-gray-900" %>
    <% end %>
   <% end %>
</div>

查看文档时我认为我只需要执行 grid grid-cols-1 但是当我什么都不做时出现了。该页面只是空白，定价应显示在任何屏幕尺寸上

<div data-target="pricing.yearlyPlans" class="mt-12 space-y-4 grid grid-cols-1 gap-6 md:grid-cols-2  xl:grid-cols-4">
  <%= render 'free_plan' %>
  <% Plan.yearly.sorted.each do |plan| %>
    <%= render layout: "subscriptions/styled_payment", locals: { plan: plan } do %>
      <%= link_to plan.name, new_subscription_path(plan: plan.id), class: "flex items-center justify-center mt-3 px-5 py-3 border border-transparent text-base font-medium rounded-md text-white hover:text-white bg-tertiary-500 hover:bg-gray-900" %>
    <% end %>
   <% end %>
</div>

Answer 1

将这段代码添加到您的 tailwind 配置文件中。默认情况下，顺风媒体查询设置为最小值，这就是为什么它们不适用于 640 像素以下的屏幕。确保使用 extend 执行此操作，否则您的其他类会受到影响。

theme: {
  extend: {
    screens: { 'sm': { 'max': '640px' } },
  },
},

Tailwind grid to work on mobile under 640px

如何让 Tailwind 网格在 640 像素以下的移动设备上运行？

How do I get Tailwind grid to work on mobile under 640px?

tailwind-css