'Tailwind custom background-image not working in production

In my CRA project I've added my own background images by editing the theme.backgroundImage section of my tailwind.config.js file. The images show up locally but not in production. In production the class (eg bg-1989) is applied but does not appear to be adding a background-image property.

// tailwindcss.config.js
module.exports = {
  theme: {
    extend: {
      backgroundImage: theme => ({
        '1984':
          "linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./images/Homepage_1984.jpg')",
        '1989':
          "linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./images/Homepage_1989.jpg')",
        '1997':
          "linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./images/Homepage_1997.jpg')",
        '2003':
          "linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./images/Homepage_2003.jpg')",
        '2014':
          "linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./images/Homepage_2014.jpg')",
        '2019':
          "linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./images/Homepage_2019.jpg')",
        '2020':
          "linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./images/Homepage_2020.jpg')"
      })
    }
  }
};

And am using them as follows:

        <div className={`hero-image bg-${year.id}`}>
          <div className="small-headline text-white absolute w-full scene-name">
            <Container className="grid__container">
              <Row className="grid__row">
                <Col lg={2} />
                <Col lg={6}>{year.title}</Col>
                <Col lg={4}>{year.id}</Col>
              </Row>
            </Container>
          </div>
        </div>

// package.json
{
  "name": "on-borrowed-time",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "express": "^4.17.1",
    "node-sass": "^4.14.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-grid-system": "^7.1.1",
    "react-html-parser": "^2.0.2",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  .
  .
  .
  "devDependencies": {
    "autoprefixer": "^9.8.6",
    "postcss": "^7.0.36",
    "prettier": "^1.19.1",
    "sass": "^1.30.0",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4"
  }
}
cssreactjsbackground-imagecreate-react-apptailwind-css


Solution 1:[1]

As I understand, tailwind will just load the classes that are used only and do not load the all classes. Since you are changing the classes dynamically at the run time, then there are classes that you don't have. To solve this problem you can add divs with the dynamic classes like this.

<div className={"bg-1984 hidden"}> </div>
<div className={"bg-1989 hidden"}> </div> 
<div className={"bg-1997 hidden"}> </div> 
<div className={"bg-2003 hidden"}> </div> 
<div className={"bg-2014 hidden"}> </div>
<div className={"bg-2019 hidden"}> </div>
<div className={"bg-2020 hidden"}> </div>

That work for me but I don't know if there are a better solution.

Solution 2:[2]

Create a safelist of dynamically generated class names to be available for use at run time.

// tailwind.config.js
module.exports = {
  safelist: [
    'bg-1984',
    'bg-1989',
    // ...
    'bg-2020',
  ],
  // ...
};

Solution 3:[3]

Try not to concatenate bg-${year.id} class as it is may purged. You can find information here

It is important to avoid dynamically creating class strings in your templates with string concatenation, otherwise PurgeCSS won’t know to preserve those classes.

Don't use string concatenation to create class names

<div class="text-{{  error  ?  'red'  :  'green'  }}-600"></div>

Do dynamically select a complete class name

<div class="{{  error  ?  'text-red-600'  :  'text-green-600'  }}"></div>

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 Musab Alsalmani
Solution 2
Solution 3 Ihar Aliakseyenka

Related Questions