Tailwind css 在构建和部署后无法在 Vercel 上运行

Question

我正在使用 Tailwind CSS 来设置我的 Web 应用程序的样式，在本地，它运行良好，但是当我构建我的 GitHub 存储库并将其部署到 Vercel 时，它无法运行，问题出在哪里？

我的一个上校：

<div
        className={`${classes.allTechnicalList} flex flex-wrap items-center justify-center px-0`}
 >
<Col
   lg={2}
   md={6}
   sm={6}
   xs={12}
   className={`lg:px-0.5 md:pr-0 md:pl-8 py-4 ${classes.allTechnicalListCol}`}
        >
   <div className="imgBorder text-center rounded-lg shadow  block flex-wrap justify-center items-center px-5 pt-8 pb-16 lg:mb-12 h-44 lg:w-48">
      <Image
          className="max-w-full h-full m-auto"
          alt=""
          src="/php-icon.png"
       />
       <p className="text-sm space-x-1 m-0 pt-2 pb-4">PHP</p>
    </div>
 </Col>
  .
  .
  .

在本地：

在 Vercel 上构建和部署后：

如您所见，在本地，col 显示为 flex，但在服务器上却不是。

这是我的 taiwlind 配置：

module.exports = {
purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*. 
{js,ts,jsx,tsx}"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
  transitionDuration: ["hover", "focus"],
},
fontSize: {
  sm: ["15px"],
  base: ["16px", "24px"],
  lg: ["25px", "28px"],
  xl: "40px",
},
},
variants: {
extend: {},
},
corePlugins: {
  container: false,
},
plugins: [
 function ({ addComponents }) {
  addComponents({
    ".container": {
      maxWidth: "100%",
      "@screen sm": {
        maxWidth: "600px",
      },
      "@screen md": {
        maxWidth: "765px",
      },
      "@screen lg": {
        maxWidth: "1320px",
      },
      "@screen xl": {
        maxWidth: "1320px",
      },
    },
  });
},
],
};

这是 postccs.config.js：

module.exports = {
plugins: [
"tailwindcss",
"postcss-flexbugs-fixes",
[
  "postcss-preset-env",
  {
    autoprefixer: {
      flexbox: "no-2009",
    },
    stage: 3,
    features: {
      "custom-properties": false,
    },
  },
],
],
};

Answer 1

这很可能是因为purging，tailwind 有一个功能可以清除项目中未使用的类。

要验证是否是这种情况，并排除 Vercel 作为问题点，您可以：

1. 使用npm run build && npm run export 创建一个新的导出
2. 提供导出服务，您可以使用简单的 http 服务器或hot-reload-server 等工具来完成此操作
3. 在本地测试一下

如果你看到本地也缺少相同的类，那么肯定是由以下行引起的；

{`lg:px-0.5 md:pr-0 md:pl-8 py-4 ${classes.allTechnicalListCol}`}

当您将 css 作为模块加载时会看到（next.js 功能），如果您随后使用串联生成模块类和静态类混合的动态字符串，tailwind 会错过动态导入，因为它不明白 next.js 如何为作为模块导入的每个文件构建一个随机类名，如果你检查任何 next.js dom，你会看到你的类的名称附加了一些哈希/随机字符串。

如果你导入一个名为 LoginPage.scss 的文件并使用它的 loginButton 类，

import loginStyles from 'styles/LoginPage.scss'

function fun() {
  return <>
    <button className={loginStyles.loginButton}>Login</button>
  </>
}

next 将生成的类类似于LoginPage_LoginButton__1Auw8，基本上是{moduleName}_{className}_{randomString}。

为了解决这个问题；您需要将单个模块类附加到每个 className 道具，以便tailwind 可以正确推断类，将静态类和模块类分解为两个不同的 div 相应地应用样式。

<!-- wrong method -->
<div className={`mx-auto font-lato ${myModule.myClass}`}></div>

<!-- right method, use encapsulating divs to have one moduleClass passed as a single prop -->
<div className={`mx-auto font-lato`}>
  <div className={myModule.myClass}>
  </div>
</div>

如果这些类必须应用于同一个 div，请考虑在样式模块中创建一个新类并直接导入它。

阅读更多关于写作purgeble HTML

Answer 2

1. 检查是否将 tailwind 作为开发依赖项。
2. 检查是否有任何错误，例如未定义的变量导致某些内容未呈现。

Answer 3

• 检查 tailwind 是否包含在依赖项而不是 devDependencies 中
• 运行一次npm build，看看build是否有问题
• 检查 tailwind 文档并确认您有带有清除模式的 tailwind 配置文件，他们推荐的方式如下：

module.exports = {
  purge: [
   // "./src/**/*.html",
   // "./src/**/*.vue,
   // "./src/**/*.jsx"
  ],
  theme: {},
  variants: {},
  plugins: [],
}```

Answer 4

我假设你的项目是基于 React 的。

您不能“npm run start”在服务器上实时编译资产，您只能在 localhost 上执行此操作。 相反，您必须运行“npm run build”并将生成的构建文件夹与服务器上的已编译资产一起部署。

您应该只在服务器上部署“build”文件夹，不要部署其他文件。

另外，请务必完整查看 Tailwindcss 安装过程，以确保您更改了脚本以正确包含 Tailwind，这是官方文档（Reactjs 部分）的链接：https://tailwindcss.com/docs/guides/create-react-app

奖励：清除服务器缓存，也许是你唯一需要做的事情。