在我的CRA項目中，我通過編輯我的tailwind.config.js文件的theme.backgroundImage部分添加了我自己的背景圖片。圖像在本地顯示，但不在生產中顯示。在生產中，應用了該類(如bg-1989 ),但似乎沒有添加背景圖像屬性。

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

我是這樣使用它們的:

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

據我所知，tailwind只會加載那些被使用的類，而不會加載所有的類。因為您在運行時動態地更改了類，所以有些類是您沒有的。要解決這個問題，您可以像這樣添加帶有動態類的div。

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

那對我很有效，但是我不知道是否有更好的解決方法。

創建動態生成的類名的安全列表，以便在運行時使用。

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

我認為Reggie的安全列表解決方案可以很好地解決生產中的這個問題。但是，我首先要確保你沒有像bg-${year.id}那樣動態地生成類 相反，您希望在此之前定義它，并按照docs將該變量實現為一個完整的類: https://tailwindcss . com/docs/content-configuration # dynamic-class-names

除了bg-${year.id},您還可以使用類似以下的內嵌內容:

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

您保留了動態顯示背景的能力，tailwind將獲取整個類名。否則，它將非常不一致地工作。

在您的情況下，您可能有太多的選項(年份),您希望在函數中而不是在內聯中生成它。