Question

我在我的Nuxt应用中使用"@nuxtjs/tailwindcss": "^2.0.0"。安装后，它创建了一个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。如果使用了某个类，则清除不会删除该类。由于您没有使用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

如果我查看文档，重要的密钥应该位于导出的根目录：

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

代替

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

无法在NuxtJS中配置Tailwind

2 个答案: