将 tailwind CSS 与多个相似元素一起使用的最佳做法是什么？

Question

我正在学习 Tailwind CSS。据我了解，如果您想设置元素样式，请向其添加 Tailwind 实用程序 css class。想给多个相似元素设置样式怎么办？例如，我有以下 HTML 片段：

<table id="t1">
<tr>
<td class="px-2 text-lg"></td>
<td></td>
<td></td>
</tr>
</table>

如您所见，我有三个 <td> 元素，我为第一个元素设置了样式。我希望他们看起来都一样。我是否应该将相同的 classes 添加到以下两个 td 元素？我觉得这个方法好像不对，但是又不知道怎么办。

Answer 1

如果您使用的是 React 或 Vue 等框架，那么如果您制作一个组件，您实际上需要做一次。或者简单地使用 map.

但如果没有，那么您可以通过制作一个包含所有常见 class 的 class 来使用 @apply。这不是一个好方法，因为现在你必须自己命名 classes 然后记住这个名字，当你想要更改一个小细节时，你需要转到你的 CSS 文件这里是如何它适用于您的示例：

转到您为 tailwind 层添加指令的 CSS 文件并添加：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
.tdata{
@apply px-2 text-lg;
}
}

然后在你的 html:

<table id="t1">
<tr>
<td class="tdata"></td>
<td class="tdata"></td>
<td class="tdata"></td>
</tr>
</table>

What's the best practice to use tailwind CSS with multiple similar element?