Tailwind css 在部署时不工作

Posted 2023-03-07

【中文标题】Tailwind css 在部署时不工作

【英文标题】：Tailwind css not working while its deployed

【发布时间】：2021-10-22 14:49:38

【问题描述】：

我已经在我的 next.js 应用程序中安装了 tailwind，它在我的本地主机中工作 但是当我将它部署到 vercel 或构建它并运行它时，它不使用 tailwind 类，并且它看起来像在我部署时没有安装 tailwind。

这是我的 json 包

  "name": "portofilo",
  "version": "0.1.0",
  "private": true,
  "scripts": 
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start",
    "lint": "next lint"
  ,
  "dependencies": 
    "bootstrap": "^5.1.0",
    "eslint": "7.32.0",
    "eslint-config-next": "11.1.0",
    "next": "11.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-icons": "^4.2.0",
    "react-typed": "^1.2.0",
    "react-vertical-timeline-component": "^3.3.3",
    "styled-components": "^5.3.0",
    "styled-normalize": "^8.0.7",
    "postcss-import": "^14.0.2"
  ,
  "devDependencies": 
    "autoprefixer": "^10.3.1",
    "postcss": "^8.3.6",
    "postcss-import": "^14.0.2",
    "tailwindcss": "^2.2.7"
  

顺便说一句，我将 devDependencies 移至依赖项，但仍然无法正常工作

【问题讨论】：

请分享您的顺风配置。 （编辑帖子并添加顺风配置）

从 devDependencies 中移动 tailwindcss 模块对你没有帮助。这似乎是另一个问题。

【参考方案1】：

确保您的清除在 tailwind.config.js 文件中正确配置

应该是这样的：

purge: [ "./src/pages/**/*.js,ts,jsx,tsx", "./src/components/**/*.js,ts,jsx,tsx", ],

【参考方案2】：

我刚刚将这行代码添加到我的 tailwind 配置文件中，它工作了！

启用：process.env.NODE_ENV === "production",