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

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

Version

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

N/A

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
├── README.md
├── 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

https://stackblitz.com/edit/nuxt-starter-ehxzhu?file=using-srcDir/nuxt.config.ts @Atinux

This time, none of the classes are being resolved.

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

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

Here's my reproduction :
https://codesandbox.io/s/elated-silence-mhr24l?file=/.demo/tailwind.config.ts

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: [
    '@nuxt/content',
    '@nuxtjs/tailwindcss'
  ],
  //...
  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

Atinux wrote this answer on 2023-02-03

The working demo from @damienroche

https://codesandbox.io/p/sandbox/quiet-fog-6zvdr2?file=%2Fyarn.lock&selection=%5B%7B%22endColumn%22%3A14%2C%22endLineNumber%22%3A807%2C%22startColumn%22%3A2%2C%22startLineNumber%22%3A807%7D%5D

Your Name

Your 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