Tailwind background images have the following syntax:
backgroundImage: (theme) => ({
"drop-arrow": "url('/res/public/images/drop_down_arrow.svg')",
...
})
where /res is outside the folder ../www/www/res.. but uses the url to resolve on the network. This project is already quite large and I wanted to introduce the storybook. I added the @storybook/addon-styling package and completed the setup guide. When trying to build the storybook, it cannot parse the images because they are in another folder.
I tried renaming
"drop-arrow": "url('/res/public/images/drop_down_arrow.svg')", to
"drop-arrow": "url('../www/www/res/public/images/drop_down_arrow.svg')", . There is some progress, but I don't want to touch it because it might break something. Is it possible to use a custom tailwind configuration for storybook or parse the assets correctly?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I also encountered the same problem and tried many methods without success. Did you find a solution?
I have this image extension theme in tailwind.config.js:
backgroundImage: { 'grid': "url('/img/bg-grid.png')", }If I remove the url pseudo-function, storybook will start but stop processing the background in the page.