Tailwind CSS 样式在部署时未应用

Question

这是我第一次使用Tailwind CSS为我的React应用程序进行样式设置。在本地运行应用程序时样式完美应用，但是现在我使用了gh-pages进行部署后，没有样式被应用。我需要更改package.json文件或其他内容吗？ 链接到实际网站

{
  "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"
  }
}

- Mark

---

你找到任何解决方案了吗？ - Dory Daniel

@DoryDaniel 我没有这样做。我最终只是使用了他们的CDN。 - Mark

你在使用 TypeScript 吗？如果是，必须将其包含在 'tailwind.config.js' 文件中。 - Dory Daniel

Answer 1

虽然Fred提供的当前最佳解决方案是可行的，但我在Tailwind文档中发现了一种更好的解决方案。您可以在tailwind.config.js中指定一个安全列表，这个安全列表中指定的类将永远不会被清除。

// tailwind.config.js
module.exports = {
  purge: {
    content: ['./src/**/*.html'],
    safelist: [
      'bg-blue-500',
      'text-center',
      'hover:opacity-100',
      // ...
      'lg:text-right',
    ]
  },
  // ...
}

更多信息请参考：https://tailwindcss.com/docs/optimizing-for-production#safelisting-specific-classes。

- user12035491

---

谢谢。这是问题的正确答案。 - Vikram Deshmukh

Answer 2

我遇到过类似的问题。

在我的情况下，我使用了动态设置的颜色类名，比如 className=text-${color}-500。

这就是问题所在。

如果你按照官方的 tailwind 文档进行设置，构建过程中也会自动设置 purgeCSS。然后，它将从构建过程（在你的例子中部署到 gh-pages）中删除所有未使用的 CSS 类。

为了解决这个问题，你需要在某处明确地写下类名，因为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
   *

   */

这解决了tailwind / purgecss的任何构建问题，我现在可以在我的项目中愉快地使用动态类。

希望这可以帮助到你，我知道有点晚了，但我刚刚偶然发现这个问题并试图解决它！

- Fred

Answer 3

这个问题的原因是purge-css删除了未使用的样式。你可以通过将想要的颜色添加到该组件中的div元素并隐藏该组件来防止这种情况发生。

示例：

            <div className="hidden bg-success bg-info bg-danger bg-warning"></div>

这将解决您的问题。

- Luci

Answer 4

针对任何TypeScript用户：

由于tailwind安装文档没有明确提到这一点

请在您的tailwind.config.js文件中，像下面所示，在content属性中添加tsx类型。

  module.exports = {
  content: ["./src/**/*.{html,js,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

- Bender

Answer 5

根据Tailwind文档中的描述，Tailwind类需要可清除，文档链接在此处：https://tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html。如果您正在使用变量连接类名，例如w-${sidebarWidth}，则它们会在构建时被剥离和丢失。

您需要改变构建动态名称的方法。以下是我所做的，对我来说比维护注释列表更有意义：

1. 将要用于类名内的任何变量存储为Tailwind文档中描述的确切值。例如：

// lib/tw.js
export const HEADER_HEIGHT_CLASS = "h-16";

编写一个小助手函数来帮助构建类。

// classnames.js
export default function merge(...args) {
  return args.join(" ");
}

3. 当需要使用动态类名时，将它们组合在一起。

import cx from "lib/classnames";
import { HEADER_HEIGHT_CLASS } from "lib/tw";

...
<header className={cx("bg-white", HEADER_HEIGHT_CLASS)}>
  ...
</header>
...

这可以确保字符串h-16在某个地方存在，因此将在部署时捕获为一个包含的类。

这个小细节曾经让我头疼不已，因为我花了几天时间以一种我认为合理的方法进行本地测试，结果发现在部署后一切都坏了。一旦你知道为什么要使用这个特性，它本身就非常有意义，但是，我希望Tailwind能在他们文档的前面更接近的部分放置一些警告。

- TestWell