Как лучше всего использовать CSS попутного ветра с несколькими похожими элементами?

Я изучаю Tailwind CSS. Насколько я понимаю, если вы хотите стилизовать элемент, вы добавляете к нему css-класс утилиты Tailwind. Что делать, если я хочу стилизовать несколько похожих элементов? Например, у меня есть следующий фрагмент HTML:

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

Как видите, у меня есть три элемента <td>, и я применил стиль к первому. Я хочу, чтобы они все выглядели одинаково. Должен ли я добавить одни и те же классы к следующим двум элементам td? Я чувствую, что этот подход кажется неправильным, но я не знаю, что делать.

Современные подходы к организации и работе с CSS в проекте
Современные подходы к организации и работе с CSS в проекте
Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...
0
0
29
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Другие вопросы по теме