This is my first Create React app website using Telwind CSS for styling, styles work fine when I run the site locally, but when I deploy it in Netlife All styles are gone, I don’t know where the problem is. Help
netlify Site Name: https://josevalen.netlify.app/ Github Repo: https://github.com/jmvr37/Personal-Website
I’ve tried almost everything and still nothing, no indication of where the problem might be, it’s still fine locally.tailwindcss.config.js
My JSON file
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@craco/craco": "^6.3.0",
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.15",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"bootstrap": "^5.1.1",
"font-awesome": "^4.7.0",
"autoprefixer": "^9.0.0",
"headroom.js": "^0.12.0",
"lottie-web": "^5.7.13",
"react": "^17.0.2",
"react-bootstrap": "^2.0.0-rc.0",
"react-dom": "^17.0.2",
"react-headroom": "^3.1.1",
"react-scripts": "4.0.3",
"reactstrap": "^8.9.0",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "craco start",
"build": "CI= react-scripts build",
"test": "jest",
"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": {
"@fortawesome/fontawesome-free": "^5.15.4",
"autoprefixer": "^9.0.0",
"@tailwindcss/postcss7-compat": "^2.1.0",
"postcss": "^7.0.35",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.0"
}
}
tailwindcss.config.js
module.exports = {
important: true,
purge: [ '/public/*.html',
'./src/components/**/*.{jsx,js}',],
theme: {
extend: {
},
screens: {
'sm': '640px',
// => @media (min-width: 640px) { ... }
'md': '768px',
// => @media (min-width: 1024px) { ... }
'lg': '1280px',
// => @media (min-width: 1280px) { ... }
},
},
variants: {
extend: {},
},
plugins: [],
}