如何为生产环境构建设置Tailwind响应式变体？

Question

在根据Tailwind的文档设置了Craco之后，我在create-react-app应用程序中设置了响应式变体。在开发构建中这些变体起作用，但是在生产构建中没有图像加载。我错过了什么吗？

我已确定问题很可能出在我的生产配置中。当我将任何background-image URL之一“硬编码”到我的App.css文件中以进行测试时，它们在生产构建中正确显示。

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  @variants responsive {
    .test-XS {
      background-image: url('https://res.cloudinary.com/.../test-XS.png');
    }
    .test-SM {
      background-image: url('https://res.cloudinary.com/.../test-SM.png');
    }
    .test-MD {
      background-image: url('https://res.cloudinary.com/.../test-MD.png');
    }
    .test-LG {
      background-image: url('https://res.cloudinary.com/.../test-LG.png');
    }
    .test-XL {
      background-image: url('https://res.cloudinary.com/.../test-XL.png');
    }
  }
  /* There are about 20 more sets of these for different images */
}

package.json 文件:

{
  "homepage": "http://xxx.github.io/yyy",
  "name": "color-portfolio",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^6.1.1",
    "@tailwindcss/postcss7-compat": "^2.0.2",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.6.3",
    "autoprefixer": "^9.8.6",
    "postcss": "^7.0.35",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.2",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
    "web-vitals": "^1.1.0"
  },
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "gh-pages": "^3.1.0"
  }
}

craco.config.js :

module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

tailwind.config.js :

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx,css}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

- Jesse

Answer 1

问题出在我使用的className连接方式上。

Tailwind 的文档中有相关内容，请参见 这里。

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

以下是我错误示范的一个例子：

<div className={`card bg-contain ${props.image}-XS sm:${props.image}-SM md:${props.image}-MD lg:${props.image}-LG xl:${props.image}-XL`}>

我现在采用的解决方案是：更改Tailwind配置，以指定要清除的层，从而使其不再对实用程序层进行"tree-shake"(摇树)处理（更多信息请参阅Tailwind文档这里）：

tailwind.config.js :

module.exports = {
  purge: {
    layers: ['base', 'components'],
    content: ['./src/**/*.{js,ts,tsx}', './public/index.html']
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

我确定这会使我的构建大小不必要地变大，但至少在我找到更好的方法来整合这些动态类变体之前，我的项目已经部署了。

- Jesse