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

Question

我正在学习 Tailwind CSS。据我了解，如果你想设计一个元素的样式，你可以向它添加 Tailwind 实用程序 css 类。当我想要为多个相似的元素设置样式时该怎么办？例如，我有以下 HTML 片段：

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

正如您所看到的，我有三个<td>元素，并且我设计了第一个元素。我希望它们看起来都一样。我应该向以下两个td元素添加相同的类吗？我觉得这种做法似乎不正确，但我不知道该怎么办。

Answer 1

React如果您正在使用诸如此类的框架Vue，那么如果您制作一个组件，您实际上需要执行一次。或者简单地使用map.

但如果没有，那么您可以@apply通过创建一个包含所有公共类的类来使用。这不是一个好方法，因为现在您必须自己命名类，然后记住该名称，当您想要更改一个小细节时，您需要转到您的 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>