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

This issue has been tracked since 2022-10-29.

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 wrote this answer on 2022-11-06

Nice found @mena234

Do you mind opening a PR?

mena234 wrote this answer on 2022-11-06

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)

More Details About Repo
Owner Name nuxt-modules
Repo Name tailwindcss
Full Name nuxt-modules/tailwindcss
Language TypeScript
Created Date 2019-04-04
Updated Date 2023-03-29
Star Count 1285
Watcher Count 12
Fork Count 157
Issue Count 57

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date