Storybook with Tailwind - Tailwind's background image is not resolved

Question

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?

Answer 1

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.