tailwind-css

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

I'm learning Tailwind CSS. As I understand, if you want to style an element, you add Tailwind utility css class to it. What should I do when I want to style multiple similar elements? For example, I have the following HTML snippet:

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

As you can see, I have three <td> elements and I styled the first one. I want them all looking the same. Should I add the same classes to the following two td elements? I feel like this approach seems incorrect, but I don't know what to do.

Solution

  • If you are working with a framework such as React or Vue etc, You will actually need to do it once if you make a component. or simply using a map.

    But if not then you could use @apply by making a class containing all the common classes. this is not a good approach because now you have to name classes by yourself and then remember the name and when you want to change a small detail then you need to go to your CSS file here is how it works for your example:

    go to your CSS file where you added directives for tailwind layers and add this:

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

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

    then in your html:

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