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

Question

I followed these steps from the Tailwind docs to add Tailwind CSS v3 to my Nuxt.js v2.15.8 project. Now, when I save a file while having npm run dev running, I get stuck in a rebuilding loop. It keeps building successfully, but then claiming that some random number was just updated so it rebuilds. I have to use Control + C to get it to exit.

↻ 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

...

Does anyone know what might be causing this? The only 2 things I added to "nuxt.config.js" are below, directly out of the Tailwind CSS documentation.

// 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

I've solve the problem with the following steps:

1. Remove nuxt/tailwind module
2. Follow the instructions for Tailwind 3 setup with Nuxt in the official documentation
3. Check your buildModules in nuxt.config, remove '@nuxtjs/eslint-module' and add '@nuxt/postcss8'
4. yarn clean
5. yarn install