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?

May 16, 2023, 5:02 PM
3 0 7

comments

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

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

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

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

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

Find and replace

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