input.includes is not a function when add a css with object format in nuxt.config.js css property.

[mena234]

While I was upgrading an old Nuxt project, there are some CSS files declared in an object format in nuxt.config.js file.

For example.

css: [{ src: '~assets/scss/global', lang: 'scss' }]

When I installed the @nuxt/tailwindcss, I got an error "input.includes is not a function".

If I transform it to string format, it works fine.

For example.

css: ['~assets/scss/global.scss']

After some debugging, I found out that in the module file in the setup function, it expected to receive the nuxt.options.css as an array of strings only.

    nuxt.options.css = nuxt.options.css ?? []
    const resolvedNuxtCss = await Promise.all(nuxt.options.css.map((p) => resolvePath(p)))

I think it should check first if the option is in object format to pass the src attribute, or if it is in string format to pass it as it is.

something like that.

    nuxt.options.css = nuxt.options.css ?? []
    const resolvedNuxtCss = await Promise.all(nuxt.options.css.map((p) => resolvePath(p.src ?? p)))

I forked the project and added some changes to apply this and it worked for me.

https://github.com/mena234/tailwindcss/tree/Fix-Css-Option-In-Object-Format-Error

Version

"@nuxtjs/tailwindcss": "^5.3.3",
"nuxt": "^2.15.8",

Reproduction Link

https://codesandbox.io/s/gallant-rosalind-hq6ft4

Steps to reproduce

1- Create a new nuxt2 project
2- Install @nuxt/tailwindcss package.
3- Add a global CSS file with object format in the nuxt.config.js file

What is Expected?

Working with CSS object format.

What is actually happening?

Gives an error "input.includes is not a function"

[atinux]

Nice found @mena234

Do you mind opening a PR?

[mena234]

Nice found @mena234

Do you mind opening a PR?

Sure, please let me know if I missed something as it's my first contribution to an open-source package.

#557 (comment)