Submitted 9 months ago

Quizapp-Vite-Reduxttk-TailwindCSS

Teodor Jenkler•3,740

@TedJenkler

Preview site View code

This is a solution for...Frontend Quiz app

HTML
CSS
JS

3intermediate

Design comparison

SolutionDesign

Solution retrospective

For some reason my background wont come into the deploy it only works localhost cant figure out why. Feedback is welcome

Community feedback

markus•2,160

@markuslewinPosted 9 months ago

I think it's because in the build step, Vite will try to find the image after Tailwind has created the CSS rule inside index.css, so you want the url() inside tailwind.config.js to be relative to index.css. It might also work to use an absolute path from the project root.

// tailwind.config.js
export default {
  theme: {
    extend: {
      backgroundImage: {
        "pattern-dark": "url('./assets/images/bg-mobile.svg')",
        "pattern-light": "url('./assets/images/bg-mobile-light.svg')",
        "pattern-dark-tablet": "url('./assets/images/bg-tablet.svg')",
        "pattern-light-tablet": "url('./assets/images/bg-tablet-light.png')",
        // or
        "pattern-dark": "url('/src/assets/images/bg-mobile.svg')",
        "pattern-light": "url('/src/assets/images/bg-mobile-light.svg')",
        "pattern-dark-tablet": "url('/src/assets/images/bg-tablet.svg')",
        "pattern-light-tablet": "url('/src/assets/images/bg-tablet-light.png')",
      },
    },
  },
};

Marked as helpful

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord