无法在 NuxtJS 中配置 Tailwind

Posted 2023-03-07

【中文标题】无法在 NuxtJS 中配置 Tailwind

【英文标题】：Can not config Tailwind in NuxtJS

【发布时间】：2020-11-01 17:42:35

【问题描述】：

我将"@nuxtjs/tailwindcss": "^2.0.0" 用于我的 Nuxt 应用程序。 安装后，它创建了一个 tailwind.config.js 文件。然后，我添加了一些代码，如下所示：

module.exports = 
  theme: ,
  variants: ,
  plugins: [],
  purge: 
    enabled: process.env.NODE_ENV === 'production',
    content: [
      'components/**/*.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
      'plugins/**/*.js',
      'nuxt.config.js',
    ],
  ,
  options: 
    important: true,
  ,
;

我希望 Tailwind 的所有课程都很重要，但事实并非如此。

inside the tailwin's class

我做错了什么？

【问题讨论】：

尝试设置 purge.enabled = false，您是否以某种方式运行 node_env 生产？

【参考方案1】：

很可能您正在运行NODE_ENV=production，因此它会清除未使用的类

设置 purge.enabled=false 会做你想做的事。我不建议将其设置为 false。如果使用了一个类，purge 不会删除该类。由于您没有使用 html 中的大多数类，因此它们将被删除。

module.exports = 
  theme: ,
  variants: ,
  plugins: [],
  purge: 
    enabled: false, // DONT DO THIS IN PRODUCTION
    content: [
      'components/**/*.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
      'plugins/**/*.js',
      'nuxt.config.js',
    ],
  ,
  options: 
    important: true,
  ,
;

【讨论】：

我只保留了theme 和options，但什么也没发生，或者按照你说的改为false，但它仍然不重要:( 即使我更改了默认颜色，也没有发生任何事情

你的 nuxt 配置是什么

`tailwindcss: configPath: './config/tailwind.config.js', cssPath: '~/assets/css/tailwind.css', exposeConfig: false, ,` 这是tailwind在我的 nuxt.config 中配置。请检查一下 :D 你能在 FB 发给我一个烂摊子吗？我的脸书是 fb.com/tranduybau。谢谢?

抱歉迟到了。我找到了我错过的东西，这是 postcss 配置：nuxtjs.org/faq/postcss-plugins

【参考方案2】：

如果我查看文档，重要的关键应该是 export 的根：

// tailwind.config.js
module.exports = 
  important: true,

而不是

// tailwind.config.js
module.exports = 
  options: 
    important: true,