mybearworld — 5/16/2023, 5:02:58 PM

Edit: yeah no this is wrong, tailwind is awesome

Tailwind has this problem that for some reason nobody ever mentions in these “Tailwind is amazing you should use it now!!” videos - very basic repetition. Not cards or something where you can just put it into a component, but just simple things. Say you want your links to be italic and colored cyan, but when hovered, make them a darker shade of cyan, and add an underline. That would be something like:

<a class="text-cyan-600 italic hover:text-cyan-500 underline" href="path/to/link.html">Link</a> 

Sure, fine. You have a lot of links in your application, though, and therefore have 200 links across the whole thing. Now, you want to change the cyan to green. What do you do?

♥ 4 ↩ 1 💬 7 comments

comments

oren:

In svelte you can make components, so you could make a custom link component

5/16/2023, 5:27:02 PM
mybearworld:

How would that be better than just making a class for it?

5/16/2023, 5:29:40 PM
oren:

Well, you can edit other parts of the link as well

5/16/2023, 5:52:34 PM
mybearworld:

You could edit other parts of the link with a CSS class as well…

5/17/2023, 4:36:09 AM
mybearworld:

Ohh wait I see what you mean, true, that makes sense

5/17/2023, 11:07:07 AM
oren:

Find and replace

5/16/2023, 5:22:52 PM
mybearworld:

What if you don’t want to change other cyan colors, only the link one?

5/16/2023, 5:30:04 PM