Roland Tannous
Roland Tannous
NNuxt
Created by Roland Tannous on 4/20/2024 in #❓・help
tailwindcss related warning when running npm install
Hello. I am updating the packages in my template and for some reason whenever i run
npm install
npm install
i get this warning:
> postinstall
> nuxt prepare


[nuxt:tailwindcss 6:21:40 PM] WARN You have provided functional plugins in tailwindcss.config in your Nuxt configuration that cannot be serialized for Tailwind Config. Please use tailwind.config or a separate file (specifying in tailwindcss.configPath) to enable it with additional support for IntelliSense and HMR.

ℹ Using default Tailwind CSS file nuxt:tailwindcss 6:21:40 PM
✔ Types generated in .nuxt 6:21:41 PM

added 1582 packages, and audited 1584 packages in 12s
> postinstall
> nuxt prepare


[nuxt:tailwindcss 6:21:40 PM] WARN You have provided functional plugins in tailwindcss.config in your Nuxt configuration that cannot be serialized for Tailwind Config. Please use tailwind.config or a separate file (specifying in tailwindcss.configPath) to enable it with additional support for IntelliSense and HMR.

ℹ Using default Tailwind CSS file nuxt:tailwindcss 6:21:40 PM
✔ Types generated in .nuxt 6:21:41 PM

added 1582 packages, and audited 1584 packages in 12s
although i have indeed done that in my nuxt.config.ts file:
export default defineNuxtConfig({
devtools: { enabled: true },
css: ["@/assets/css/main.css"],
tailwindcss: {
configPath: "tailwind.config.ts",
},
export default defineNuxtConfig({
devtools: { enabled: true },
css: ["@/assets/css/main.css"],
tailwindcss: {
configPath: "tailwind.config.ts",
},
and this is the tailwind.config.ts file:
/** @type {import('tailwindcss').Config} */

import defaultTheme from "tailwindcss/defaultTheme"; // https://tailwindcss.com/docs/theme#referencing-the-default-theme

export default {
content: [
"./components/**/*.{js,vue,ts}",
"./pages/**/*.{js, vue, ts}",
"./layouts/**/*.{js, vue,ts}",
"./plugins/**/*.{js,vue,ts}",
"./nuxt.config.{js,ts}",
"./app.vue",
],
theme: {
extend: {
// anything under extend extends the default Theme
font: {
// if for any reason you would like to reference the defaultTheme require the theme and spread it as shown below
sans: ['"Inter Var"', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [],
};
/** @type {import('tailwindcss').Config} */

import defaultTheme from "tailwindcss/defaultTheme"; // https://tailwindcss.com/docs/theme#referencing-the-default-theme

export default {
content: [
"./components/**/*.{js,vue,ts}",
"./pages/**/*.{js, vue, ts}",
"./layouts/**/*.{js, vue,ts}",
"./plugins/**/*.{js,vue,ts}",
"./nuxt.config.{js,ts}",
"./app.vue",
],
theme: {
extend: {
// anything under extend extends the default Theme
font: {
// if for any reason you would like to reference the defaultTheme require the theme and spread it as shown below
sans: ['"Inter Var"', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [],
};
what am i missing here? can't seem to figure it out
3 replies