tailwind-css

Tailwind Prose: How to edit link color styles?

Exactly the title.

I tried to write prose-a:hover:text-cyan-500 and similar but the links change color when I hover over the entire article.

How can I do it?

Solution

  • As per the documentation:

    Ordering stacked modifiers

    When stacking modifiers, they are applied from the inside-out, like nested function calls:

    // These modifiers:
'dark:group-hover:focus:opacity-100'

// ...are applied like this:
dark(groupHover(focus('opacity-100')))

    For the most part this doesn't actually matter, but there are a few situations where the order you use actually generates meaningfully different CSS.

    This is one of those situations where the order matters. You'd want to swap the variants around to be hover:prose-a:text-cyan-500:

    <script src="https://cdn.tailwindcss.com/3.4.5?plugins=typography"></script>

<div class="prose hover:prose-a:text-cyan-500">
  <p>Foo <a href="">bar</a> baz.</p>
</div>

<div class="prose prose-a:hover:text-cyan-500">
  <p>Foo <a href="">bar</a> baz.</p>
</div>