tailwindcss-bg-patterns
tailwindcss-bg-patterns copied to clipboard
thillmann
How to reset opacity?
I am using pattern-opacity-10 in a container tag, and all inherited tags also have opacity-10. How
can I fix that?
What I want is that the opacity only apply to the pattern
Hey I just ran into this same issue and wanted to mention that it's due to the limitations of CSS/HTML rendering. Unfortunately this package uses the CSS opacity property which essentially overrides the prop on all children elements, but I have a workaround. Instead of lowering the opacity of the pattern as a whole, you can lower the opacity of the individual colors you feed into it and then be sure to set pattern-opacity-100 or whatever you want to cascade to the child items. For example, instead of giving it #ffffff you can give it #ffffff20 and it'll work just fine over and under other elements.
So that's all I really needed from it but I know that there are some situations where that's not easily doable and it would be much nicer/quicker to use a "global" opacity for each pattern. I think what the package could do instead is use the opacity we feed into it to simplify multiply the final colors it uses by our value, that way it doesn't have to use CSS opacity which can affect other elements. I think this is especially helpful for newcomers who might just throw in patterns expecting it to work out of the box but find that it changes things in their app which they might not expect. And even more true considering the fact that the default opacity is not 100 so you will always see this when you first start working with it.
That approach might be difficult to implement due to tailwind's purging mechanics but I think it can be done. Then again, I've got no idea so forgive me as I'm just spitballing ideas. Can someone more familiar with the code clarify if this is possible?
Very well explained, thank you! +1 for documenting or fixing transparency being passed on to children
