title: How can I enable hovering colour change if the colour is set?
body: <p>I have a react component with text, the colour default set to grey or black depending if it is
  considered to &quot;active&quot; state.</p>
  <p>I am trying to add an on hover to change the colour if it is grey (not active) to dark grey on hover, but not to hover if it is black.</p>
  <p>So far I have this component,</p>
  <pre><code>&lt;a className=&quot;hover:text-green-500&quot; style={{color: activePage === 'example' ? 'black' : &quot;rgba(107, 114, 128)&quot;}} &gt; Example&lt;/a&gt;                     
  </code></pre>
  <p>The &quot;style=...&quot; is preventing the <code>hover:...</code> from working and I also have the second problem of only want the hover effect to work if the current colour is not black, I am trying to give a UI improvement for indication. I am using tailwind CSS here with React.</p>
  <p>So in summary, if Black, hover does nothing.
  If grey (i.e. set to  &quot;rgba(107, 114, 128)&quot;) the hover should set it to &quot;hover:text-green-500&quot;</p>