无法在 NuxtJS 中配置 Tailwind

Question

我将"@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

我做错了什么？

Answer 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,
  },
};

Answer 2

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

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

而不是

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