Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How can I extend tailwind backgroundImages using image paths in React with vite?

I’m trying to extend tailwind backgroundImages and no matter what I put as the image’s path it doesn’t recognize. I tried search for the answer and wasn’t able to figure out. I’m using vite in this project.

tailwind.config.css

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      backgroundImage: {
        'es': "url('/src/assets/images/es.png')",
        'us': "url('/src/assets/images/us.png')",
        'pt': "url('/src/assets/images/pt.png')",
      }
    },
  },
  plugins: [],
}

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

I tried to use vite alias to configure in some way, as well as trying multiple image paths including change the folder to public. But neither did work.

Tags:

2

Answers


  1. 0

    save your image in src/assets and in extends create a backgroundImage cofig in tailwind.config.js like this:

    /** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      backgroundImage: { 'testBg': "url('/src/assets/test-image.jpg')" }
     },
  },
  plugins: [],
}

    so you can use it like this :

    <div className="bg-testBg">
...
</div>

    i attach some image for you.
    enter image description here

    enter image description here
    enter image description here

    enter image description here

    Login or Signup to reply.
  2. 0

    If you have your images in your public directory, it’s best to access it as so:

    /assets/images

    Find more here on how to handle image paths

    backgroundImage: {
    'es': "url('/assets/images/es.png')",
    'us': "url('/assets/images/us.png')",
    'pt': "url('/assets/images/pt.png')",
  }

    then you can access the class as:

    • bg-es
    • bg-us
    • bg-pt
    <div className="bg-es"> 
   
</div>


    <div className="bg-us"> 
   
</div>


    <div className="bg-pt"> 
   
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search