顺风CSS样式在部署时未应用 [英] Tailwind CSS styling not being applied on deploy

问题描述

这是我第一次使用TailWind CSS来设计我的Reaction应用程序的样式。当我在本地运行应用程序时，它的样式非常完美，但是，现在我已经使用gh-pages部署了它，没有应用样式。我是否需要更改我的Package.json文件或其他内容？

Link to the live site

{
  "name": "seafaring",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://superhackerboy.github.io/sweet-seafaring-dreams/",
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "axios": "^0.19.2",
    "gh-pages": "^2.2.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.4.0"
  },
  "scripts": {
    "build:css": "postcss src/styles/tailwind.css -o src/styles/index.css",
    "watch:css": "postcss src/styles/tailwind.css -o src/styles/index.css --watch",
    "start": "cross-env NODE_ENV=development concurrently "npm run watch:css" "react-scripts start"",
    "build": "cross-env NODE_ENV=production concurrently "npm run build:css" "react-scripts build"",
    "test": "react-scripts test",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^2.1.0",
    "autoprefixer": "^9.7.4",
    "concurrently": "^5.1.0",
    "cross-env": "^7.0.0",
    "cssnano": "^4.1.10",
    "postcss-cli": "^7.1.0",
    "purgecss": "^2.1.0",
    "tailwindcss": "^1.2.0"
  }
}

推荐答案

我遇到过类似的问题。

在我的例子中，我使用的是动态设置的颜色类，例如className=text-${color}-500。

这就是问题所在。

如果您根据官方的顺风文档设置所有内容，您也会自动设置PurgeCSS。这将在构建过程中从您的顺风文件中删除所有未使用的CSS类(在您的示例中部署到gh-Pages)

若要解决此问题，您必须s特定地写下类名称，因为PurgeCSS查找与项目中的现有类名称匹配的任何字符串。

在我的例子中，我只是在我的一个文件中使用了这样的多行注释：

  /**
   * PurgeCSS:
   * text-red-500
   * text-green-500
   * text-yellow-500
   * text-gray-500
   * text-purple-500
   * text-indigo-500
   * text-blue-500
   * text-pink-500
   *

   */

这修复了顺风/Purgecss的任何构建问题，我现在可以很高兴地在我的项目中使用动态类。

希望这能有所帮助，我知道有点晚了，但我只是偶然发现了这个问题 我试着自己解决！

这篇关于顺风CSS样式在部署时未应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！