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

Question

我正在学习顺风CSS。据我所知，如果你想样式一个元素，你添加顺风实用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文件这里是你的例子的工作原理:

到你的CSS文件中添加tailwind层的指令，并添加如下:

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