如何解决如何为生产构建设置 Tailwind 响应式变体?
根据 Tailwind Docs 设置 Craco 后,我在我的 create-react-app
应用中设置了响应式变体。这些在开发构建中完美运行,但在生产构建中没有图像加载。我在这里错过了什么?
我已经确定问题很可能出现在我的生产配置中。当我将任何 background-image
网址直接“硬编码”到我的 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: [],}
解决方法
问题出在我在 className
中使用的串联。
Tailwind 的文档 here 中对此进行了介绍。
“不要使用字符串连接来创建类名”
我做错的一个例子:
<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 不会通过指定要在配置中清除的层来“摇晃”实用程序层(更多信息请参见 Tailwind 文档 here):
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: [],}
我确信这会使我的构建大小不必要地大,但至少我的项目已部署,直到我想出更好的方法来合并这些动态类变体。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。