Tailwind classes from other folders than components are not picked up

danbaechtold commented 1 month ago

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: pnpm@9.6.0
Builder: -
User Config: extends, modules, ui, colorMode, devtools, typescript, compatibilityDate, future, eslint, i18n, image, storyblok, runtimeConfig
Runtime Modules: @nuxt/eslint@0.3.13, @nuxt/ui@2.17.0, @nuxt/fonts@0.7.1, @nuxt/image@1.7.0, @nuxtjs/i18n@8.3.1, @nuxtjs/leaflet@1.0.14, @storyblok/nuxt@6.0.10
Build Modules: -

Version

@nuxt/ui-pro@1.3.1, @nuxt/ui@2.17.0

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 commented 1 month ago

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

danbaechtold commented 1 month ago

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

benjamincanac commented 1 month ago

Can you provide a reproduction then?

danbaechtold commented 1 month ago

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 commented 1 month ago

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

ralph-burstsms commented 1 month ago

@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 commented 1 month ago

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 commented 1 month ago

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] commented 2 weeks ago

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

nuxt / ui