Tailwind custom background-image not working in production

Question

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"
  }
}

score 0 · Answer 1 · answered Mar 10 '22 at 14:05

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.

Reggie Pinkham · Answer 2 · 2022-04-26T11:45:16.037

0

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',
  ],
  // ...
};

edited Apr 26 '22 at 11:45

answered Apr 26 '22 at 11:30

Reggie Pinkham

11,985
4
38
36

R Both · Answer 3 · 2023-06-06T22:04:24.350

0

I think the safelist solution by Reggie can be good for this problem on production. However, I would make sure first that you aren't dynamically generating the classes as you did bg-${year.id} Instead you want to define it before, and implement the variable as a complete class, as per docs: https://tailwindcss.com/docs/content-configuration#dynamic-class-names

Instead of bg-${year.id} you can use something like this inline:

{year.id === 1984 ? 'bg-1984' : ''}

You retain the ability to dynamically display a background and tailwind will pick up the whole class name. Otherwise it will work very inconsistently.

In your case you may have too many options(years) and you want to generate this in a function instead of inline.

edited Jun 06 '23 at 22:04

answered May 30 '23 at 17:28

R Both

1
2

This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/34471845) – Gerrit Bertier Jun 01 '23 at 07:35
1

I'm sorry this solution doesn't work for you! I have expanded my answer so maybe that makes it a bit clearer for you. The question was that the background image was working for the user locally but not in production, and I believe this is caused by the dynamic class name, which is explicitly advised against in the Tailwind docs. I have first hand experience with this issue. Since I didn't want to expand on the safelist solution, which may be a good avenue, I wrote a new answer. I believe this does in fact provide an answer to the question, so feel free to downvote if I'm incorrect. – R Both Jun 06 '23 at 22:10

Tailwind custom background-image not working in production

3 Answers3