Question: Tailwind & Opacity about rough-notation HOT 4 CLOSED

All annotations are created as SVG and they are assigned a class name rough-annotation So you may change the opacity via CSS:

svg.rough-annotation {
  opacity: 0.5;
}

you could also specify the color using rgba to set the opacity of the color, e.g. rgba(200, 200, 10, 0.5)

As for tailwind, there may be way to set the color using CSS properties perhaps? I am not aware or how tailwind defines colors.

Padding will not be possible because the values are used in computing the geometry, so cannot be set using CSS

from rough-notation.

Okay so if I had multiple annotations on my page and I only wanted one to have the opacity of 50%. Is there a way I can call that inline on my element?

from rough-notation.

well you can add the opacity in the color instead. that's the simplest solution. No CSS.

 annotate(heroTitle, { type: 'highlight', color: 'rgba(255, 255, 255, 0.75)' })

In CSS, if you want a spcific annotation you may have to add it to the CSS selector. e.g. Annotation under a div with id 'mydiv' would be

#mydiv svg.rough-annotation {
  opacity: 0.5;
}

from rough-notation.

Ahh, okay gotcha. Thanks man!

from rough-notation.