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

Posted 2023-03-07

【中文标题】Tailwind 自定义背景图像在生产中不起作用

【英文标题】：Tailwind custom background-image not working in production

【发布时间】：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"
  

【参考方案1】：

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

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

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

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

动态选择一个完整的类名

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

【讨论】：

成功了，谢谢！