'Background image not showing up with React + TailwindCSS

Im trying to use Tailwind with React to show a background image. My config is like the follow:

const white_bg = require("../../assets/images/wave_light.svg"); // Import using relative path
const black_bg = require("../../assets/images/wave_black.svg"); // Import using relative path

module.exports = {
  purge: [
    "src/**/*.js",
    "src/**/*.jsx",
    "src/**/*.ts",
    "src/**/*.tsx",
    "public/**/*.html",
  ],
  theme: {
    extend: {
      backgroundImage: (theme) => ({
        "white-landing": `url(${process.env.PUBLIC_URL + white_bg})`,
        "black-landing": `url(${process.env.PUBLIC_URL + black_bg})`,
      }),
    },
textColor: {
      "nav-text": "#eaeaea",
    },
    fontFamily: {
      header: ["Poppins", "sans-serif"],
      body: ["Poppins", "sans-serif"],
    },
    boxShadow: {
      header: "0px 0px 50px 1px rgba(0, 0, 0, 0.35)",
      card: "0px 0px 25px 1px rgba(0, 0, 0, 0.25)",
    },

And calling the classes in the html:

<div className="bg-white-landing white-landing box-border h-full">

None of my custom classes seem to work... Any help?

reactjs tailwind-css

Solution 1:^[1]

Have you checked this ticket?

Tailwind css backgroundImage doesn't work for me

The background image functionality of tailwindcss has been released in version 1.7.0.

Could be to do with the version you are running.

Update: I have found a way around this by adding a url-encoded svg inside tailwind.css like so:

// hardcoded svg background
  .example-selector{
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' viewBox='0 0 23 24'%3E%3Cdefs/%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='currentColor' fill-rule='nonzero' d='M22.545 21.077l-.028-.03-6.048-6.305c1.05-1.57 1.59-3.434 1.59-5.329C18.06 4.233 14 0 9.03 0 4.06 0 0 4.233 0 9.413c0 5.18 4.06 9.414 9.03 9.414 1.817 0 3.606-.592 5.11-1.658l6.049 6.305c.624.681 1.675.71 2.328.03.625-.651.653-1.747.028-2.427zM9.03 16.28c-3.635 0-6.588-3.079-6.588-6.868S5.395 2.546 9.03 2.546c3.634 0 6.587 3.078 6.587 6.867 0 3.79-2.953 6.868-6.587 6.868z'/%3E%3C/g%3E%3C/svg%3E");
  }

Solution 2:^[2]

Simply create a class and add the background-image globally in the index.css

Solution 3:^[3]

changing the path has worked for me!

theme: {
    backgroundImage: {
      'pack-train': "url('../public/images/packTrain.jpg')",
    },

Solution 4:^[4]

I read in the documentation like this

theme:{
  extend:{
    backgroundImage:{
       'white-landing':'url(../../assets/images/wave_light.svg)'
              },
          }
      }

and this worked for me, maybe it can help

https://tailwindcss.com/docs/background-image

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	kyun
Solution 3	shubham ghuge
Solution 4	Kevin Sebastian

'Background image not showing up with React + TailwindCSS

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]