Nuxt "npm run dev" 在设置 Tailwind CSS v3 后构建循环

Question

我按照 these steps from the Tailwind docs 将 Tailwind CSS v3 添加到我的 Nuxt.js v2.15.8 项目中。现在，当我在 npm run dev 运行的情况下保存文件时，我陷入了重建循环。它一直在成功构建，但随后声称某个随机数刚刚更新，因此它会重建。我必须使用 Control + C 才能退出。

↻ Updated components/Comment.vue                                                                                                                21:08:59

✔ Client
  Compiled successfully in 1.86s

✔ Server
  Compiled successfully in 1.49s

↻ Updated 1642194543006  

✔ Client
  Compiled successfully in 1.14s

✔ Server
  Compiled successfully in 1.62s 

↻ Updated 1642194545447

✔ Client
  Compiled successfully in 1.13s

✔ Server
  Compiled successfully in 947.08ms

↻ Updated 1642194547991

...

有谁知道这可能是什么原因造成的？我添加到“nuxt.config.js”的唯一两件事如下，直接来自 Tailwind CSS 文档。

// nuxt.config.js

buildModules: [
  // ...
  '@nuxt/postcss8',
],
// ...
build: {
  // ...
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
}

// tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    './components/**/*.{js,vue,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}',
  ],
  theme: {
    screens: {
      xxs: '360px',
      xs: '480px',
      ...defaultTheme.screens,
    },
    extend: {
      colors: {
        'blue-100': '#8ac7f9',
        'blue-150': '#72bbf7',
        'blue-200': '#5bb0f6',
        'blue-300': '#43a5f5',
        'blue-400': '#2c99f3',
        'blue-500': '#148ef2',
        'blue-600': '#1280da',
        'blue-700': '#1072c2',
        'blue-800': '#0e63a9',
        'blue-900': '#0c5591',
      },
    },
  },
  plugins: [],
}

Answer 1

我已经通过以下步骤解决了问题：

删除nuxt/tailwind模块
Follow the instructions 在官方文档中使用 Nuxt 设置 Tailwind 3
检查 nuxt.config 中的构建模块，删除“@nuxtjs/eslint-module” 并添加“@nuxt/postcss8”
纱线清洁
纱线安装

Answer 2

问题出在下面一行：

module.exports = {
  content: [
    './nuxt.config.{js,ts}',
  ]
}

更改为（或仅保留您正在使用的那个）：

module.exports = {
  content: [
    './nuxt.config.js',
    './nuxt.config.ts'
  ]
}

Source/Credits: https://github.com/nuxt-community/tailwindcss-module/issues/359#issuecomment-867956745

Nuxt "npm run dev" 在设置 Tailwind CSS v3 后构建循环

Nuxt "npm run dev" build loop after setting up Tailwind CSS v3

postcss

nuxt.js

tailwind-css