顺风css样式不显示在我的react应用程序网站，当我部署我的存储库

Question

这是我第一个使用顺风CSS进行样式的create react应用程序网站，当我在本地运行网站时，样式工作得很好，但是当我在netlify部署它时，所有的样式都不见了，我不知道问题在哪里。请帮助

netflix网站名称:https://josevalen.netlify.app/github repo: https://github.com/jmvr37/Personal-Website

我已经尝试了几乎所有的东西，仍然没有，不知道问题可能在哪里，它仍然在本地构建良好。我package.json

{
"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: [],
}

Answer 1

我相信你犯了一个错误=>

purge: ["/public/*.html", "./src/components/**/*.{jsx,js}"],

---

试试这样=>

purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],

---

最后你的文件tailwind.config.js应该是这样的

module.exports = {
purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
theme: {
extend: {},
screens: {
sm: "640px",
// => @media (min-width: 640px) { ... }
md: "768px",
// => @media (min-width: 1024px) { ... }
lg: "1280px",
// => @media (min-width: 1280px) { ... }
},
},
variants: {
extend: {},
},
plugins: [],
};

另外，你可以检查文档，看看你是否错过了什么…;-)致以最诚挚的问候，祝你好运!