tailwind-css - 将 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。

但如果没有，那么您可以通过创建一个包含所有公共(public)类的类来使用@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>