3

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?

Fernando Correia
  • 111
  • 1
  • 2
  • 11
  • 1
    Try it this way backgroundImage: (theme) => ({ "white-landing": "url('assets/img/white_bg')", "black-landing": "url('assets/img/black_bg')", }), – Anthony Agbator Jun 23 '21 at 18:05

5 Answers5

0

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");
  }
HKG
  • 261
  • 4
  • 15
0

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

kyun
  • 9,710
  • 9
  • 31
  • 66
Saad Aslam
  • 51
  • 6
0

changing the path has worked for me!

theme: {
    backgroundImage: {
      'pack-train': "url('../public/images/packTrain.jpg')",
    },
shubham ghuge
  • 53
  • 5
0

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

Kevin Sebastian
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 19 '22 at 01:56
0

this blog help me so after you add custom backgroundImage to your tailwind.config.js ps. don't for get quotation mark

theme: {
    extend: {
      backgroundImage: {
        // if you img file is in public folder just use '/ + img-file-name'
        "custom-name": "url('path/to/your/imgFile.png')",
      },
    },

then add 'bg-custom-name' to the div you want to have that bg-img

// your component
<div className='bg-custom-name ...'>
    < - child - >
</div>
Suphawat
  • 61
  • 7