Background imports from tailwind config file doesn't work with vuejs

Describe the problem:

Importing background images in tailiwind.config.js like

      backgroundImage: (theme) => ({
        'down-arrow': "url('/assets/down-arrow.svg')",
      }),

is not working when the class bg-down-arrow is used The CSS in dev tools is

.bg-down-arrow {
    background-image: url('/assets/down-arrow.svg');
}

The CSS when used a class in css is like

.bg-down-arrow {
    background: url(/img/down-arrow.1467c7af.svg);
}

This is probably not a problem with Tailwind but there should be a way to handle this scenario for vuejs

[adamwathan]

Hey! Yeah unfortunately there’s no way to know the final URL for images within the Tailwind config if those images are being handled by another build tool and output to locations with hashes in the name and stuff.

No plans to do any work on this so going to close. Recommendation would be to configure your build tooling in such a way that you have deterministic image paths that you can use in your config file.

[the-sides]

In case it helps anyone, I was able to work around this by defining the svg’s using the data uri, like so

backgroundImage: (theme) => ({ 'circuit-board': 'url(\'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 304 304" width="304" height="304"%3E%3Cpath fill="%232155b2" fill-opacity="0.1" d="M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-2560 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 84a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"%3E%3C/path%3E%3C/svg%3E\')', }),

This is really cool @CJGjr !