时间戳

首页 > 解决方案 > Tailwind css 在构建和部署后无法在 Vercel 上运行

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

问题描述

我正在使用 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,
    },
  },
],
],
};

标签： reactjsnext.jstailwind-css

解决方案

这很可能是因为 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>
  </>
}

LoginPage_LoginButton__1Auw8next 生成的类基本上看起来像这样{moduleName}_{className}_{randomString}。

为了解决这个问题；您需要将单个模块类附加到每个 className 道具，以便尾风可以正确推断类，将静态类和模块类分解为两个不同的 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，请考虑在样式模块中创建一个新类并直接导入它。

阅读有关编写可清除 HTML的更多信息

推荐阅读