Nuxt "npm run dev" build loop after setting up Tailwind CSS v3
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: [],
}
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