Having trouble with Tailwind custom background image not displaying correctly when the website is live

Question

Having trouble with Tailwind custom background image not displaying correctly when the website is live

When working on my CRA project, I encountered an issue with background images not appearing in the production environment. Despite adding custom background images by modifying the theme.backgroundImage section of my tailwind.config.js file, the images only show up locally and not in production. It seems that the CSS class (e.g., bg-1989) is being applied but is not actually 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')"
      })
    }
  }
};

I am utilizing these images as shown below:

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

css reactjs background-image create-react-app tailwind-css

Answer 1

Answer №1

In my understanding, tailwind will only load the classes that are actually used and not all classes. So, when you are dynamically changing classes at runtime, there may be some classes that are missing. One way to address this issue is by adding divs with the dynamic classes like shown below.

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

This approach worked for me, but I am unsure if there is a more optimal solution available.

Answer 2

In my understanding, tailwind will only load the classes that are actually used and not all classes. So, when you are dynamically changing classes at runtime, there may be some classes that are missing. One way to address this issue is by adding divs with the dynamic classes like shown below.

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

This approach worked for me, but I am unsure if there is a more optimal solution available.

Answer 3

Answer №2

Design a secure list of dynamically produced class names that can be used during execution.

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

Answer 4

Design a secure list of dynamically produced class names that can be used during execution.

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

Answer 5

Answer №3

Considering Reggie's safelist approach could be beneficial in solving the production issue at hand. Nevertheless, it is crucial to confirm beforehand that there are no dynamic generation of classes like bg-${year.id}. It would be more efficient to predefine these classes and incorporate the variable as a complete class, following the guidelines stated in the documentation: https://tailwindcss.com/docs/content-configuration#dynamic-class-names

Rather than using bg-${year.id}, consider using something similar to the following inline code:

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

This method allows for dynamic background display while ensuring Tailwind recognizes the complete class name, preventing inconsistency.

In scenarios where there are numerous options (years) involved, it may be practical to generate this functionality within a separate function instead of directly inline.

Answer 6

Considering Reggie's safelist approach could be beneficial in solving the production issue at hand. Nevertheless, it is crucial to confirm beforehand that there are no dynamic generation of classes like bg-${year.id}. It would be more efficient to predefine these classes and incorporate the variable as a complete class, following the guidelines stated in the documentation: https://tailwindcss.com/docs/content-configuration#dynamic-class-names

Rather than using bg-${year.id}, consider using something similar to the following inline code:

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

This method allows for dynamic background display while ensuring Tailwind recognizes the complete class name, preventing inconsistency.

In scenarios where there are numerous options (years) involved, it may be practical to generate this functionality within a separate function instead of directly inline.

Having trouble with Tailwind custom background image not displaying correctly when the website is live

Answer №1

Answer №2

Answer №3

Similar questions

Adjust the color of an SVG icon depending on its 'liked' status

Avoiding Default Slice Behavior in React and Redux When Navigating Websites

Attempting to move elements into an array for storage in the local storage

This hyperlink is not redirecting to an external website

Tips for implementing two Secondary Actions in React Material UI, with one positioned on the left corner and the other on the right, while ensuring that the behavior of the

Using moment with material-ui-pickers KeyboardDatePicker: A simple guide

Shopping cart with Redux implemented in React.js

Transferring information from HTML to React and Redux

What is the best way to position an image beside a jquery dialog box?

What are the steps to make the chosen title and its content active while deactivating the others?

Using Div in Bootstrap to Overlay Text on an Image

Why isn't my state updating with componentDidMount()?

What is the best way to eliminate gridlines or borders in a React-Data-Grid component?

What is the best way to mark a MenuItem as active within a Material UI Drawer component?

Issue found in Bootstrap-Multiselect plugin: The dropdown menu appears beneath the outer container when overflow-y is applied

accessing a ReactJS web application through a .NET web application

Styling a div element in React

Customizing MUI radio buttons to display tick icons instead of bullets

Positioning an image beneath the navigation bar in Bootstrap and CSS without it getting covered by text

Custom-designed background featuring unique styles