Tailwind classes from other folders than components are not picked up

[danbaechtold]

Environment

• Operating System: Windows_NT
• Node Version: v20.11.1
• Nuxt Version: 3.12.4
• CLI Version: 3.12.0
• Nitro Version: 2.9.7
• Package Manager: [email protected]
• Builder: -
• User Config: extends, modules, ui, colorMode, devtools, typescript, compatibilityDate, future, eslint, i18n, image, storyblok, runtimeConfig
• Runtime Modules: @nuxt/[email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @storyblok/[email protected]
• Build Modules: -

Version

@nuxt/[email protected], @nuxt/[email protected]

Reproduction

none

Description

When using Tailwind classes in a 'normal' component, the class usage will be detected and it will be put in the generated CSS, all good.

But when using Tailwind classes in a component defined anywhere outside of the default ./components directory, say, ./storyblok/Section.vue, the class usage will not be detected and they will be missing in the generated CSS.

I've tried to add the path to the "content" config like this (tailwind.config.ts), but it doesn't seem to have any effect:

...
export default <Partial<Config>>{
  content: [
    './components/**/*.{js,vue,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './storyblok/**/*.vue', // <----- added
    './app.vue',
    './error.vue'
  ],

  theme: {
...

My guess is that the problem lies in ui/src/tailwind.ts: There, the directories are hardcoded and seem to ignore the "content" config.

Additional context

No response

Logs

No response

[benjamincanac]

Have you tried to put those paths inside content.files in your tailwind.config.ts?

[danbaechtold]

@benjamincanac I tried now, but it didn't solve it.

[benjamincanac]

Can you provide a reproduction then?

[danbaechtold]

I can't, because storyblok would require an access token to work.

But the case is quite simple: When adding a class, say "my-10" anywhere in say, "./app/components/MyComponent.vue", it works, but if I put the same class with the same code, but just in another location, say, "./app/storyblok/MyComponent.vue", it doesn't work.

[benjamincanac]

Can you not provide a reproduction without storyblok like you mentioned then?

[ralph-kudo]

@danbaechtold I also use storyblok, and added the path the same way you did. It's working fine on my end.

Have you tried a clean up npx nuxt cleanup? Or have you checked it is getting the updated tailwind config, sometimes Nuxt needs a restart.

[danbaechtold]

I've found the solution:

By adding this to nuxt.config.ts, it works:

components: {
  dirs: [
    {
      path: '~/storyblok',
      global: true
    },
    '~/components'
  ]
},

(No change is required in tailwind.config.ts (namely, the "content" config I showed above is not required)).

So.. is it a bug? Does it only happen depending on the order of the registered modules for example? I don't know. But let me know if you need anything else from my end, and thank you guys for your help.

[danbaechtold]

Ah.. maybe this could help, at some point I got these WARN logs with the old setup:

WARN warn - The purge/content options have changed in Tailwind CSS v3.0.
WARN warn - Update your configuration file to eliminate this warning.
WARN warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources

Checking the link it seems it could very well be related to my issue..

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.

[benjamincanac]

Have you tried with latest version? The @nuxtjs/tailwindcss module has fixed some issues since then.

[benjamincanac]

Feel free to reopen if it didn't solve.

[danbaechtold]

I have tried the latest version 3.14.1592, but it didn't solve the problem. (I don't have the permission to reopen).

[benjamincanac]

I meant the latest version of @nuxtjs/tailwindcss and @nuxt/ui. Please provide a working reproduction so we can reopen this. You can do one without implementing storyblok.

[danbaechtold]

OK, here it is (the repro - see readme for details): https://github.com/danbaechtold/nuxt-ui-issue-1978

[benjamincanac]

Well thank you for the reproduction, it was exactly what I told you in my first answer 4 months ago 😅 You need to add this to the content.files in your tailwind.config.ts:

export default {
  content: {
    files: [
      './blocks/**/*.{vue,js,ts,jsx,tsx}',
    ],
  },
}

[benjamincanac]

https://tailwindcss.com/docs/content-configuration

[danbaechtold]

Oh no 🤦 .. sorry, you where right!

There was one little thing I've missed in my real project, when I had tried your suggestion: I have the 'storyblok' folder inside the new Nuxt 4 'app' folder, and I had forgotten to set the path like this: './app/storyblok/**/*.vue'!

Again, sorry to bother you, thanks for your help, hope this thread helps somebody else along the way..