Tailwind 样式不适用于生产

时间:2021-05-05 00:52:14

标签: create-react-app tailwind-css netlify vercel

我已经构建了一个 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 start 之后创建的 build 文件夹中使用 yarn run build 在我的本地上运行非常好。所以我猜这是在远程服务器上部署时 Tailwind CSS 文件的问题。

1 个答案:

答案 0 :(得分:0)

好的,问题是我指向了清除对象中的错误文件夹。所以,修改我的内容:

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

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