Background opacity is not working

Sim923 commented 3 years ago

Thank you for this wonderful library!

But I was unable to implement background-opacity. https://tailwindcss.com/docs/background-opacity

So I created my own customized styles.

I would be grateful it could support bg-opacity. I reviewed this library - https://github.com/vadimdemedes/tailwind-rn And it supports bg-opacity fully!

ajsmth commented 3 years ago

hey there - thanks so much! I've looked at the link you've posted there but I'm not sure how you would go about this - from what I can tell you'd have to convert the default (hex) colours to rgba

I can give this some thought, but in the mean time I would recommend adding your own custom colours with RGBA values and your designed alpha. Something like:

  theme: {
    extend: {
      colors: {
        `black-o-10`: `rgba(0, 0, 0, 0.1)`
      }
    }
  }

Should end up with a color like bg-black-o-10. Not the greatest name but hopefully you get the idea to use this as an escape hatch for now

Sim923 commented 3 years ago

Sure, I did it exactly and got the desired result

But I expected to use the same tailwind attributes just like bg-opacity-50

ajsmth commented 3 years ago

yes - they are leveraging css variables which are not available in RN - I know the tailwind-rn package does some JS stuff to emulate css variables which might be worthwhile in the future, but for now this is the best solution

Sim923 commented 3 years ago

Thank you!

ajsmth / tailwind-react-native

Background opacity is not working #4