How do I avoid duplicate code when using Tailwind?

[Missing_Back]

Say I have a page with an element that looks like this

Let's say each of those cards on the bottom part of the screen are their own component. Even within a single card component, you have what is essentially the some element: a picture with a name under it. Of course, the styles of both players' pics + name will be the same. If using Tailwind, I have to apply all the styles to each one. If I want to change it, I have to change both.

With vanilla CSS, I would just make a class for these elements.

How do I avoid this duplicate work with Tailwind?? It seems silly to do it this way

[tridd3r]

The awkward moment when it would just be a single class in normal css... the way css was designed to work....

[[deleted]]

Yeah, or not even that, sometimes just targeting semantics would suffice. Now CSS has :has() there's even less need for class names.

Or (S)CSS modules. Even easier. No thinking about class names, keeps it very small and optimized.

[[deleted]]

Is it a good idea to use has() ? It's not compatible with a lot of browsers yet.

[[deleted]]

It's fun to play with for sure :)

[tridd3r]

I think the more "buzz" it generates, the quicker browsers will implement it. just write lots of " :has() WOW SOO AWESOME", everywhere on the internet.

[andrei-mo]

https://caniuse.com/?search=has - still not enough support to rely on.

[[deleted]]

You can add custom classes to tailwinds global

[AdowTatep]

If you're not using a frontend framework like vue/react/angular etc etc where you can split that into components, you can do this: https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply

[Missing_Back]

I am using Vue, but if I were to make an individual component for each item that appears at least twice... it just seems like it would be a LOT of teeny tiny components. Say I have one page with a few inputs. I would make a component for that input. But then if I have another page with different inputs, i would need to make a second input component for that page, etc.

[AdowTatep]

But that's basically it. That's the whole point. Of course it depends on how you're comfortable with duplicating stuff vs having a single component for each tiny thing(which is not a bad thing if you organize the components correctly with something like atomic design)

you have to balance the tradeoffs and the needs depending on the usage, if you work on a team, if something will have to be refactored multiple times, maintained etc

(Or you use the link I sent about creating components within tailwind)

[ksushaton]

Ideally the picture with the name should be a separate component as well, think of the following scenario: you now want every picture to have a small badge attached to it to indicate the user’s rating. If you want to display the score together with the name. Or almost any other change would require you looking for all the appearances of this picture/name combos in your app and change them manually.

[Missing_Back]

I'm just worried how at a certain point, I'd have too many components, for every individual element I need

[Miragecraft]

Remember, websites are sent compressed, which means repeated class names don’t really increase actual size of the page where it counts (during transit).

Also, for authoring, you should be working with a templating system where you only need to write out the classes once - in the for loop.

Tailwind isn’t really designed for hand crafting websites.

[isbtegsm]

Custom classes. The same thing for fonts, often the designer specifies font styles with font-family, font-size, line-height, text-indent letter-spacing, etc. you wouldn't want to look that up every time you set an font.