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

Posted 2023-03-07

【中文标题】如何在 vercel zeit 上使用 Tailwindcss 2.0 部署 nuxt.js 项目

【英文标题】：How to deploy a nuxt.js project with Tailwindcss 2.0 on vercel zeit

【发布时间】：2021-05-16 10:18:19

【问题描述】：

我正在尝试使用 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 时不起作用。 在本地效果很好。

【问题讨论】：

“不起作用”是什么意思？你有任何错误吗？样式没有被应用吗？

我得到了这个：play.tailwindcss.com/qY8AmsoeFW 我知道我必须添加尾风/表单，这只是为了向您展示我得到了什么。在本地它可以工作

您链接的内容有问题吗？你能解释一下你对那里的期望吗？

一些输入是不可见的，应该是这样的：play.tailwindcss.com/yNUiF1YY8J?file=config 不是这个：play.tai​​lwindcss.com/qY8AmsoeFW

是require('@tailwindcss/forms')没有被使用的问题吗？

【参考方案1】：

如果没有更多细节，我真的不能说，但是如果您在生产中遇到困难，但不是在 tailwindcss 项目的开发中 - 首先要检查的是您是否使用动态类名（例如，text-$color-500 ）。这些will be purged 在生产中，除非您将它们添加到允许列表中。

更新

查看您提供的存储库后，问题似乎是 Tailwind 生成 CSS 定位 [type='text']，但在您的 Nuxt 应用程序生成的 html 中，html-minifier 清除了此问题（请参阅 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 上工作：play.tailwindcss.com/qY8AmsoeFW 这真的是一个基本的 nuxt 项目。我创建项目，添加tailwind 2.0：它适用于本地但不适用于vercel。

PurgeCSS 默认启用，如果您使用的是 tailwindcss。您可以按照我上面答案中链接中的说明将其关闭。