search

jaredh159 / tailwind-react-native-classnames

simple, expressive API for tailwindcss + react-native
2.03k stars 82 forks source link

Custom Box Shadow does not work #313

Closed Sydney-o9 closed 2 months ago

Sydney-o9 commented 2 months ago

Hi Team, great work on this library, are custom box shadows supported?

tailwind.config.js

...
  theme: {
    extend: {
      boxShadow: {
        custom: '0px 1px 20px 0px rgba(0, 0, 0, 0.10)',
      },
    },
  },
...
<View style={tw`shadow-custom`}
 ...
</View

Error:

custom unknown or invalid utility
jaredh159 commented 2 months ago

take a second to read the section in the readme about box-shadows -- the web-style string 0px 1px 20px 0px rgba(0, 0, 0, 0.10) is not going to work here. it is possible to provide custom shadows, but i would suggest you add a custom utility with the plugin addUtilities function, and pass a style object that RN would understand, something like: 

{
      shadowOffset: { width: 1, height: 1 },
      shadowColor: `#000`,
      shadowRadius: 3,
      shadowOpacity: 0.125,
      elevation: 3,
}
Sydney-o9 commented 2 months ago

@jaredh159 Highly appreciate the time in answering to this 👍