Job listings with filtering with React and Tailwind

Community feedback

• 

  P

  markus•2,160

  @markuslewinPosted 6 months ago

  Hiya, 1 solution for each approach you're trying:

  _ - _ - _ - _

  If you want to apply the image using the style prop, you have to add "s to the string, as mentioned in https://vitejs.dev/guide/assets.html#importing-asset-as-url.

  When passing a URL of SVG to a manually constructed url() by JS, the variable should be wrapped within double quotes.

  Like this:

  const style = {
    backgroundImage: `url("${bgHeader}")`,
  };
  

  _ - _ - _ - _

  If you want to apply the image using Tailwind classes, you have to specify the URL relative to your CSS file (index.css).

  // tailwind.config.js
  export default {
    theme: {
      extend: {
        backgroundImage: {
          "desktop-header": "url('../assets/bg-header-desktop.svg')",
        },
      },
    },
  };
  

  // Background.jsx
  export default function Background() {
    return <div className="w-full h-[155px] bg-desktop-header bg-center"></div>;
  }
  

  What's currently happening is that Tailwind injects the URL url('./src/assets/bg-header-desktop.svg') into the CSS file. When Vite checks the CSS file, it tries - and fails - to find the SVG file at src/css/src/assets/bg-header-desktop.svg.

  Marked as helpful

  2

  ---

  

  Gustavo Souza•160

  @GustavoSouza123Posted 6 months ago

  @markuslewin this was really helpful. Thanks a lot.

  1