Issue with `extends` + `@nuxtjs/tailwind` not taking `srcDir` into account

This issue has been tracked since 2023-01-26.


  • Operating System: Linux
  • Node Version: v16.18.1
  • Nuxt Version: 3.1.1
  • Nitro Version: 2.1.0
  • Package Manager: [email protected]
  • Builder: vite
  • User Config: extends, app, modules
  • Runtime Modules: @nuxtjs/[email protected]
  • Build Modules: -

Reproduction Link


Steps to reproduce

  • Setup a nuxt project with @nuxtjs/tailwindcss and nuxt-seo-kit
  • Add nuxt-seo-kit to extends list in nuxt.config.ts
  • Set srcDir to src
  • Move app.vue into src dir
  • Replace <NuxtWelcome /> with
    <div class="w-10 h-10 bg-red-500"></div>

What is Expected?

All the tailwindcss classes should be resolved properly.

What is actually happening?

So, I was trying to use nuxt-seo-kit which is a Nuxt Layer. Therefore, I added nuxt-seo-kit to the extends list in the nuxt.config.ts
But then I started to have issue with almost half of tailwindcss classes not being resolved.

After 2 days of trying everything, I redid everything from scratch.
I created a new nuxt project with nuxt 3.1.1 and @nuxt/tailwindcss 6.3.0 .
I added the nuxt-seo-kit to the nuxt.config.ts in the extends list.
Everything was fine.
So as usual, I put everything to src/ dir and in the config I added srcDir: "src". Now the problem reappeared. Only half of the CSS classes were being resolved.

I'm not sure where this is coming from, as nothing is being logged in the console or terminal.

In the given context, only w-10 h-10 is resolved. However, tailwind playground is working as usual.

This is the structure of a working project:

├── app.vue
├── layouts
│  └── default.vue
├── node_modules
├── nuxt.config.ts
├── package.json
├── pages
│  └── index.vue
├── pnpm-lock.yaml
├── tailwind.config.ts
└── tsconfig.json
Atinux wrote this answer on 2023-01-28

It would help if you can provide a reproduction with Stackblitz or a GH repo @mukundshah

mukundshah wrote this answer on 2023-01-28
damienroche wrote this answer on 2023-02-03

I have the same issue.

I would like to set a custom tailwind.config file for a folder that extends my base nuxt.config.ts file

Capture d’écran 2023-02-01 à 10 14 55

Capture d’écran 2023-02-01 à 10 15 01

Capture d’écran 2023-02-01 à 10 15 14

When i run pnpm nuxt dev .starter and go to the Tailwind Viewer url, primary color is extracted from my base tailwind.config file, also I think JIT mode doesn't look for files in .starter but in base directory

Capture d’écran 2023-02-01 à 10 16 26

Here's my reproduction :

damienroche wrote this answer on 2023-02-03

After updating base nuxt.config.ts file with the following options, it seems to work as expected :

export default defineNuxtConfig({
  modules: [
  tailwindcss: {
    configPath: '~/tailwind.config'
Atinux wrote this answer on 2023-02-03

Very sorry about this, the order or the layers was wrong the way I use defu for merging config.

It's fixed in v6.3.1, see my commit: 0357676

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


Issue Title Created Date Updated Date