Background image not showing up with React + TailwindCSS

user_8366765 0
Viewed 7540

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?

tailwind-css reactjs
4 Answers

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");
  }
user_28821110

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

user_118763760

changing the path has worked for me!

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

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

user_173285450
Related