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: [],
}

@Danila Yes, it is configured. Added it to the bottom of the original question. — ATLChris
– ATLChris, Commented Jan 14, 2022 at 21:31
And you installed postcss@latest and autoprefixer@latest? latest might be the key, because Nuxt uses not latest versions by default. You can also try to move plugins or buildModules around, maybe it should be first or something — Danila
– Danila, Commented Jan 14, 2022 at 21:35
I tried playing around with removing everything, then just installing "@nuxt/postcss8" and I am still seeing the issue, so I don't think it is @latest related. — ATLChris
– ATLChris, Commented Jan 14, 2022 at 21:54
@Wonderman I didn't solve the issue, but but what I did find, is that Tailwind v3 is conflicting with the ESLint module in Nuxt. Are you using the ESLint module? If so, try disabling it and it should build correctly. For the time being, I am just using ESLint via VS Code. Don't need it as a built in build tool. — ATLChris
– ATLChris, Commented Jan 19, 2022 at 12:39

hymair · Accepted Answer · 2022-01-27 11:22:44Z

12

The problem is the following line:

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

Change to (or simply keep only the one you are using):

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

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

answered Jan 27, 2022 at 11:22

hymair

2161 gold badge2 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lorado Over a year ago

You just saved my life! I had first attempts to update whole project with multiple dependecies last month, but literally gave up, bc i was not able to find the source of this evil endless build loop. Today another attempt, and by accident found out it was a tailwind issue. Your answer is first result on my google search. much love!

Luca Spezzano Over a year ago

for me is not working :(

Wonderman · Accepted Answer · 2022-01-25 10:24:16Z

1

I've solve the problem with the following steps:

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

answered Jan 25, 2022 at 10:24

Wonderman

97110 silver badges21 bronze badges

1 Comment

gion_13 Over a year ago

This works, but it would've been useful to explain and state what your findings were rather than just posting simple steps. It seems like there is a conflict between @nuxtjs/tailwind and @nuxtjs/eslint-module. As it was already stated in the comments, I don't think I need @nuxtjs/eslint-module, so I just removed it.

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related