如何在 vercel zeit 上使用 Tailwindcss 2.0 部署 nuxt.js 项目

Question

我正在尝试使用 tailwind.css 2.0 上传一个基本的 nuxt.js 项目。我用过：

yarn add --dev tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

安装 tailwindcss 2.0

首先我使用的是 npm，然后是 yarn，但在部署时 tailwindcss 2.0 不起作用。在本地效果很好。

Answer 1

如果没有更多细节，我真的无法判断，但如果您在生产中遇到困难，但在 tailwindcss 项目的开发中没有遇到困难 - 首先要检查的是您是否使用动态 class 名称（例如，text-${color}-500）。这些 will be purged 正在生产中，除非您将它们添加到许可名单。

更新

查看了您提供的存储库后，问题似乎出在 Tailwind 生成 CSS 目标 [type='text'] 但这被 html-minifier 在生成的 HTML 你的 Nuxt 应用程序（见 issue）。您可以在 nuxt.config:

中使用此代码关闭此行为

export default {
  build: {
    html: {
      minify: {
        collapseBooleanAttributes: true,
        decodeEntities: true,
        minifyCSS: true,
        minifyJS: true,
        processConditionalComments: true,
        removeEmptyAttributes: true,
        // this is the only line we're changing from defaults
        // but we have to include all as they aren't merged
        removeRedundantAttributes: false,
        trimCustomFragments: true,
        useShortDoctype: true
      }
    }
  }
}

如何在 vercel zeit 上使用 Tailwindcss 2.0 部署 nuxt.js 项目

How to deploy a nuxt.js project with Tailwindcss 2.0 on vercel zeit

vue.js

nuxt.js

tailwind-css

vercel

autoprefixer