时间戳

首页 > 解决方案 > 如何让 Tailwind 网格在 640 像素以下的移动设备上工作？

tailwind-css - 如何让 Tailwind 网格在 640 像素以下的移动设备上工作？

问题描述

我的问题是我在移动视图上看不到我的定价页面。顶级课程是我正在寻找的。这是我的代码

<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>

标签： tailwind-css

解决方案

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

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

Tailwind 网格可在 640 像素以下的移动设备上运行

推荐阅读