NativeScript/tailwind

box-shadow error

vallemar opened this issue · 1 comments

when I use the class for example: shadow-xl I get the following error. It seems that a color is passing like unset and it is not accepted

JS: Error: Failed to apply property [box-shadow] with value [0 0 #0000, 0 0 #0000, unset] to StackLayout(5). Error: Invalid color: unset
JS:     at new Color (file: app\webpack:\@nativescript\template-blank-vue-ts\node_modules\@nativescript\core\color\color-common.js:33:0)
JS:     at new Color (file: app\webpack:\@nativescript\template-blank-vue-ts\node_modules\@nativescript\core\color\index.android.js:2:7)
JS:     at parseCSSShadow (file: app\webpack:\@nativescript\template-blank-vue-ts\node_modules\@nativescript\core\ui\styling\css-shadow.js:56:0)
JS:     at valueConverter (file: app\webpack:\@nativescript\template-blank-vue-ts\node_modules\@nativescript\core\ui\styling\style-properties.js:1133:29)
JS:     at Style.setCssValue [as css:box-shadow] (file: app\webpack:\@nativescript\template-blank-vue-ts\node_modules\@nativescript\core\ui\core\properties\index.js:573:0)
JS:     at CssState.setPropertyValues (file: app\webpack:\@nativescript\template-blank-vue-ts\node_modules\@nativescript\core\ui\styling\style-scope.js:537:47)
JS:     at file: app\webpack:\@nativescript\template-blank-vue-ts\node_modules\@nativescript\core\ui\styling\style-scope.js:425:0
JS:     at StackLayout._batchUpdate (file: app\webpack:\@nativescript\template-blank-vue-ts\node_modules\@nativescript\core\ui\core\view-base\index.js:286:0)
JS:     at CssState.updateDynamicState (file: app\webpack:\@nativescript\template-blank-vue-ts\node_modules\@nativescript\core\ui\styling\style-scope.js:423:0)

The tailwind shadow utils won't work in NS right now - at least not fully, because they stack multiple shadows on top of each other to achieve the look.

The "simplest" fix right now is to configure custom shadows in the tailwind config.