You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Render部署后Tailwind CSS样式不生效问题求助

部署在Render上的Tailwind CSS样式加载失败问题

我在Render上部署了个人作品集,本地运行时Tailwind CSS样式显示正常,但部署后样式完全加载不出来。作为Tailwind新手,我怀疑问题出在Webpack对Tailwind类的路径引入配置上。

以下是我的配置文件:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  important: true,
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

package.json

{
  "name": "portfolio",
  "version": "1.0.0",
  "description": "This is Mike Norris' portfolio to showcase his projects",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "build:dev": "npm run build -- --watch --mode=development",
    "test": "JWT=shhhhh mocha",
    "test:dev": "DATABASE_URL=postgres://localhost/portfolio_db npm run test -- --watch",
    "test:dev:quiet": "QUIET=true npm run test:dev",
    "start:dev": "JWT=felix nodemon server/index.js --ignore dist/ --ignore src/ & npm run build:dev",
    "windows-start:dev": "nodemon server --ignore dist/ --ignore src/",
    "windows-dev": "concurrently --kill-others \"npm run windows-start:dev\" \"npm run build:dev\""
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@mui/icons-material": "^5.11.16",
    "@mui/material": "^5.12.2",
    "@mui/x-date-pickers": "^6.12.1",
    "@nivo/core": "^0.83.0",
    "@nivo/line": "^0.83.0",
    "@react-oauth/google": "^0.11.1",
    "axios": "^1.1.3",
    "bcrypt": "^5.1.0",
    "dayjs": "^1.11.9",
    "dotenv": "^16.3.1",
    "ejs": "^3.1.9",
    "express": "^4.18.2",
    "framer-motion": "^10.16.2",
    "fs": "^0.0.1-security",
    "jsonwebtoken": "^9.0.0",
    "jwt-decode": "^3.1.2",
    "pg": "^8.8.0",
    "react-loader-spinner": "^5.4.5",
    "react-swipeable-views-react-18-fix": "^0.14.1",
    "react-swipeable-views-utils": "^0.14.0",
    "sequelize": "^6.25.3",
    "ws": "^8.13.0"
  },
  "devDependencies": {
    "@babel/core": "^7.19.6",
    "@babel/preset-react": "^7.18.6",
    "@mui/system": "^5.12.1",
    "babel-loader": "^9.0.0",
    "chai": "^4.3.6",
    "concurrently": "^8.0.1",
    "mocha": "^10.1.0",
    "nodemon": "^2.0.20",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.4",
    "react-router-dom": "^6.4.2",
    "redux": "^4.2.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.4.1",
    "supertest": "^6.3.1",
    "swiper": "^9.2.4",
    "tailwindcss": "^3.3.5",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  },
  "directories": {
    "test": "test"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/mjngit/portfolio"
  },
  "bugs": {
    "url": "https://github.com/mjngit/portfolio/issues"
  },
  "homepage": "https://github.com/mjngit/portfolio#readme"
}

我已经尝试过以下操作,但都没能解决问题,甚至多次导致构建失败:

  • 修改Webpack配置以支持CSS
  • 在src目录添加style.css文件
  • 调整构建命令

恳请大家帮忙排查问题。


内容的提问来源于stack exchange,提问作者Michael Norris

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.04 21:29:52