Tailwind 自定义背景图像在生产中不起作用答案

【问题标题】：Tailwind custom background-image not working in productionTailwind 自定义背景图像在生产中不起作用
【发布时间】：2021-09-08 06:01:31
【问题描述】：

在我的 CRA 项目中，我通过编辑 tailwind.config.js 文件的 theme.backgroundImage 部分添加了自己的背景图像。图像显示在本地，但不在生产中。在生产中应用了类（例如bg-1989），但似乎没有添加background-image 属性。

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

【问题讨论】：

标签： css reactjs background-image create-react-app tailwind-css

【解决方案1】：

尽量不要连接bg-${year.id} 类，因为它可能会被清除。可以找资料here

避免在模板中使用字符串连接动态创建类字符串很重要，否则 PurgeCSS 不会知道保留这些类。

不要使用字符串连接来创建类名

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

动态选择一个完整的类名

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

【讨论】：

成功了，谢谢！