顺风样式不适用于生产

Posted 2023-03-07

【中文标题】顺风样式不适用于生产

【英文标题】：Tailwind styles not working on production

【发布时间】：2021-07-27 08:06:51

【问题描述】：

我已经构建了一个 creat-react-app 应用程序并将其部署到 Netlify (https://festive-booth-3f3a79.netlify.app/)，但正如您所见，由于某些原因，样式没有被加载。

我尝试使用 Vercel 部署应用程序，但我遇到了同样的问题。

这是我的tailwind.config.js

module.exports = 
  important: true,
  // Active dark mode on class basis
  darkMode: "class",
  i18n: 
    locales: ["en-US"],
    defaultLocale: "en-US",
  ,
  purge: 
    content: ["./pages/**/*.tsx", "./components/**/*.tsx"],
    // These options are passed through directly to PurgeCSS
  ,
  theme: 
    extend: ,
  ,
  variants: 
    extend: 
      backgroundColor: ["checked"],
      borderColor: ["checked"],
      inset: ["checked"],
      zIndex: ["hover", "active"],
    ,
  ,
  plugins: [],
  future: 
    purgeLayersByDefault: true,
  ,
;

您可以在这里查看我拥有的所有其他文件：https://gitlab.com/lucas.distasi/react-tmdb

在yarn run build 之后创建的构建文件夹中使用yarn start 在我的本地运行完全正常。所以我猜这是在远程服务器上部署时 Tailwind CSS 文件的问题。

【参考方案1】：

好的，问题是我指向了清除对象中的错误文件夹。所以，用这个修改我所拥有的：

purge: 
    content: ["./src/pages/**/*.js,jsx,ts,tsx", "./src/components/**/*.js,jsx,ts,tsx"]
    // These options are passed through directly to PurgeCSS
  

使页面正确显示。 您的项目中的目录可能不同。