如何在Tailwind CSS中不使用@apply创建desktop-grid组件类？

API 探路者

2026-6-24

不用@apply实现desktop-grid组件类的方案

直接将Tailwind工具类对应的原生CSS属性写入媒体查询即可，同时保留@layer components以确保Tailwind的优先级处理逻辑正常工作。以下是等价的代码实现：

@layer components {
  .desktop-grid {
    @media (min-width: 1024px) {
      display: grid;
      grid-template-columns: 1fr repeat(12, 84px) 1fr;
      margin-left: auto;
      margin-right: auto;
      column-gap: 1.5rem;
    }
  }
}

对应关系说明：

lg:grid → 媒体查询（min-width:1024px）内的display: grid;（Tailwind默认lg断点为1024px，若你自定义了断点，需替换为对应值）
lg:grid-cols-[1fr,repeat(12,84px),1fr] → 直接映射为grid-template-columns的具体值
lg:mx-auto → 拆解为margin-left: auto; margin-right: auto;
lg:gap-x-6 → Tailwind默认gap-x-6对应1.5rem，若你的Tailwind配置修改了spacing刻度，需替换为对应数值