How to set up Tailwind responsive variants for production build? - create-react-app

Question

I set up responsive variants in my create-react-app app after setting up Craco according to Tailwind Docs. These work perfectly in development build but no images load in production build. What am I missing here?
I have determined the issue is most likely in my production configuration. When I "hard-code" any of the background-image URLs directly into my App.css file as a test, they show up correctly in production build.
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: [],
}

Answer 1

The issue was in the concatenation I was using in my classNames.
It is covered in Tailwind's documentation here.
"Don't use string concatenation to create class names"
An example of what I was doing incorrectly:
<div className={`card bg-contain ${props.image}-XS sm:${props.image}-SM md:${props.image}-MD lg:${props.image}-LG xl:${props.image}-XL`}>
My workaround to get my project deployed for now: Changing it so that Tailwind does not "tree-shake" the utilities layer by specifying which layers to purge in config (more info in Tailwind Docs 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: [],
}
I am sure that this makes my build size unnecessarily large, but at least my project is deployed until I figured out a better way to incorporate these dynamic class variants.