Can't resolve #build/tailwind.config/*

[simllll]

Version

@nuxtjs/tailwindcss: 6.7.0
nuxt: v2.16.3

Steps to reproduce

installing @nuxtjs/tailwindcss 6.7.0 or any version abover 6.6.7 and run nuxt build on a nuxt2 project, it results into build errors like the following:

Module not found: Error: Can't resolve '#build/tailwind.config/variants.mjs' in '/home/simon/Dev/hokify/hokify-server/services/admin-app/admin-interface/.nuxt/tailwind.config'
it throws errors about each file mentioned inside of tailwind.config/index.mjs

What is Expected?

should build like < 6.6.8

What is actually happening?

throws errors during build that it cannot find #build/tailwind.config/...
the files are there, but not sure abuot "#build" itself?

[simllll]

Can't see anything that leads to this in the changeset: v6.6.7...v6.6.8

did anythign else change? e.g. building/packaging?

[ineshbose]

The resolved tailwind.config.cjs did stop being generated, but this seems to be related #616 (with exposeConfig enabled) which was released in 6.4.1

Is it possible to get a replication over stackblitz please? https://stackblitz.com/github/nuxt/starter/tree/v2-stackblitz

[simllll]

Would fit indeed to the error, but 6.6.6 and 6.6.7 are working. Indeed strange, I'm trying to create a replica on stackblitz.

[simllll]

I'm not able to reproduce it somehow on stacklitz, maybe it is related to our monorepo setup (pnpm) which hoists all the nuxt speicifc things, but maybe it's missing something... still strange that it works with < 6.6.8.

will try to followup on this later

[ineshbose]

Sure. Here to help - let me know 🙂

[simllll]

I finally was able to reproduce the issue, it's not realted to pnpm, it happens when I import e.g. theme from #tailwind-config.
import { theme } from '#tailwind-config';

i created a simple helpers/test.ts:

import { theme } from '#tailwind-config';

export function blub() {
  return theme.colors['color-blue-dark'];
}

and imported it inside pages/index.vue to do just a simple console log on mounted of "blub()".

then I get the same erros:

ERROR in ./.nuxt/tailwind.config/index.mjs
Module not found: Error: Can't resolve '#build/tailwind.config/blocklist.mjs' in '/home/projects/github-ruub1l-bhwdqo/.nuxt/tailwind.config'

see https://stackblitz.com/edit/github-ruub1l-bhwdqo?file=pages%2Findex.vue,package.json,helpers%2Ftest.ts

[simllll]

Reduced it to the minimum changes: https://stackblitz.com/edit/github-ruub1l-ssfjxw?file=README.md
(no typescript, just tailwind and the import error)

[ineshbose]

Okay! I'm able to now find the issue.
I was puzzled about this issue not happening below 6.6.8 as you noted, but we also noted that we dropped tailwind.config.cjs for the new versions which created issues for Nuxt 2 as we were unable to test it, and exposeConfig in Nuxt 2 relies on it for CommonJS, while the #build/tailwind.config/* is for exposeLevel tree-shaking (but I can't say if Nuxt 2 can take advantage of it).

While I plan a fix for this ASAP, if you wish to stay on the latest version, the workaround for this, as in the docs, is to create a module and add it before @nuxtjs/tailwindcss in Nuxt config:

import { addTemplate } from '@nuxt/kit'

export default function () {
  this.nuxt.hook('tailwindcss:resolvedConfig', (c) => 
    addTemplate({
      filename: 'tailwind.config.cjs',
      getContents: () => `module.exports = ${JSON.stringify(c)}`,
      write: true
    })
  )
}