主页 / user-3973406

Dac0d3r's questions

Martin Hope
Dac0d3r
Asked: 2024-04-29 05:02:28 +0800 CST
  • 5

因此，我正在为我们的新网站使用 Next.js 14 React Server Components 等技术，并且我尝试尽可能多地使用服务器组件 - 至少在我绝对必须将某些功能转移到客户端组件之前。

这意味着我想坚持“CSS”领域，并选择退出 JavaScript 来处理一些并不真正需要但经常使用 JS 的琐碎事情，因为它更容易或者我们已经习惯了它。

然而，给我带来问题的是我们也在使用的 Tailwind。我能够通过以下方式使用纯 css 快速解决我的问题：

.times {
  display: none;
}

.timeslots:has(.timeslot-1 > input:checked)~.timeslot-1-times {
  display: block;
}

.timeslots:has(.timeslot-2 > input:checked)~.timeslot-2-times {
  display: block;
}

.timeslots {
  display: flex;
  gap: 1rem;
}
<form>
  <div>
    <div class="timeslots">
      <div class="timeslot-1">
        <input type="radio" name="date" id="2024-04-28" />
        <label for="2024-04-28">2024-04-28</label>
      </div>
      <div class="timeslot-2">
        <input type="radio" name="date" id="2024-04-29" />
        <label for="2024-04-29">2024-04-29</label>
      </div>
    </div>
    <div class="times timeslot-1-times">
      <div>
        <input type="radio" name="time" id="12" />
        <label for="12">12</label>
      </div>
      <div>
        <input type="radio" name="time" id="13" />
        <label for="13">13</label>
      </div>
    </div>
    <div class="times timeslot-2-times">
      <div>
        <input type="radio" name="time" id="15" />
        <label for="15">15</label>
      </div>
    </div>
  </div>
</form>

如果“时间”嵌套在每个日期下，那么用顺风甚至用检查的伪选择器来解决这将是微不足道peer的peer-checked。然而，我确实需要在水平列表中呈现日期，并在下面以全角显示每个日期的时间，就像我试图在上面的代码片段中显示的典型选项卡组件一样。

一般来说，我想避免在使用 tailwind 时使用纯 css，因为创建者表示如果他能及时返回，他会删除“@apply”。那么，实现与上面的代码片段类似的功能的最佳实践 Tailwind-way 是什么？我是否缺少一种简单的内置方式，或者我是否需要添加自己的自定义变体？

tailwind-css