Overwrite content options is not working

[jheng-jie]

• package.json

{
  "devDependencies": {
    "@nuxtjs/tailwindcss": "^6.2.0",
    "nuxt": "3.0.0"
  }
}

i tried various settings. but overriding always doesn't work

1. nuxt.config.ts

   export default {
     tailwindcss: {
       config: {
         content() {
           return ['./theme1/**/*.vue']
         }
       }
     },
   }

   is not working.

2. tailwind.config.js

   export default {
     content() {
       return ['./theme1/**/*.vue']
     }
   }

   will throw the error. Cannot restart nuxt: (tailwindConfig.content || []) is not iterable

the following settings are possible. but not formal

1. nuxt.config.ts

   export default {
     hooks: {
       // is working
       'tailwindcss:config'(config: any) {
         config.content = ['./theme1/**/*.vue']
       },
     },
   }

2. tailwind.config.js

   export default {
     // is working, purge options have changed in Tailwind CSS v3.0.
     purge: [
       'test/*.vue'
     ]
   }

what i need is overwrite not merge. can anyone help?

[atinux]

Why using a function for content?

[jheng-jie]

@atinux I refer to the document's

config/#merging-strategy

[ineshbose]

I didn't see an option in the source code of the module for content to be function. Moreover, since there are also usage of JSON.stringify to add templates, the function would get removed (though the module internally copies over the config according to my knowledge). But I've opened #592 as a draft fix for it if Atinux would provide feedback. 🙂

[ineshbose]

@jheng-jie can you check with 6.3.0?

[jheng-jie]

@ineshbose 6.3.0 is working! thank you very much.

// nuxt.config.ts
{
  tailwindcss: {
    config: {
      content(origin: TailwindConfig['content']) {
        console.log('origin', origin)
        // overwrite
        return [
          './src/App.vue',
          './src/theme/_common/**/*.{vue,scss}',
          `./src/theme/${process.env.VITE_THEME}/**/*.{vue,scss}`,
        ]
      },
    },
  }
}