构建和部署Vercel后，顺风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

1. 检查是否包含了顺风作为devdependency.
2. Check，如果有任何错误，如变量未定义，这将导致某些内容无法呈现。

Answer 2

我假设您的项目基于React。

你不能"npm run start“在服务器上实时编译资源，你只能在localhost上这样做。相反，您必须运行"npm run build“并将生成的build文件夹与编译后的资产一起部署到服务器上。

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

此外，一定要完整地检查Tailwind the的安装过程，以确保您更改了脚本以正确地包含Tailwind，以下是官方文档(Reactjs部分)的链接：https://tailwindcss.com/docs/guides/create-react-app

额外的好处:清除服务器缓存，也许是你唯一需要做的事情。

Answer 3

• 检查顺风是否包含在依赖项中，而不是devDependencies
• run npm构建一次，查看build
• 检查顺风文档中是否存在问题，并确认您具有具有清除模式的顺风配置文件，如下所示：

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