exposeConfig with specific part is undefined

[HZooly]

Version

@nuxtjs/tailwindcss: 5.0.3 nuxt: 2.15.8

Steps to reproduce

Set exposeConfig to true in nuxt.config.js

export default {
  tailwindcss: {
    exposeConfig: true
  }
}

Import theme from configuration in component.

import { theme } from '#tailwind-config'

What is Expected?

Expecting theme to be defined.

What is actually happening?

theme is undefined.

When importing the full configuration, I can get the theme field.

[gianpesto]

Same with nuxt 3 🫡

[antoineLZCH]

Hi,

VERSION

{
  "@nuxtjs/tailwindcss": "^5.1.3",
  "typescript": "^4.7.4"
  "nuxt": "3.0.0-rc.4",
}

STEPS TO REPRODUCE Same steps as HZooly did :

Set exposeConfig to true in nuxt.config.ts.

When trying to create util method, I'm importing theme the way the doc says :

import { theme } from '#tailwind-config'

I also tried with :

import { theme } from '~/tailwind-config'
import { theme } from '../tailwind.config.js'

or even :

import resolveConfig from 'tailwindcss/resolveConfig';
import tailwindConfig from '../../../tailwind.config.js';

const fullConfig = resolveConfig(tailwindConfig)

Finally, I tried to install @types/tailwindcss and doing this way :

import { TailwindConfig } from 'tailwindcss/tailwind-config';
import resolveConfig from 'tailwindcss/resolveConfig'
import tailwindConfig from '../tailwind.config.js'

const fullConfig = resolveConfig(tailwindConfig as unknown as TailwindConfig)

Then got this error on runtime :

TS2307: Cannot find module '#tailwind-config' or its corresponding type declarations.

or on devtools console :

Uncaught (in promise) SyntaxError: The requested module '/_nuxt/tailwind.config.js' does not provide an export named 'default' (at colors.ts:2:1)

To be clear, I try to access a custom color object property defined in tailwind.config.js like this :

module.exports = {
  theme: {
   colors: {
     custom: {...}
   }
 }
}

I don't know if I'm doing this the wrong way but it seems I'm not alone with this issue.

[hacknug]

The only way to make this work currently is to import the fully resolved config like this:

import tailwindConfig from '#tailwind-config'

[ineshbose]

The method above doesn't allow tree-shaking unfortunately - I hope a fix is made soon!

[rikzwarthoff]

Any progress on this? Issue still persists here on Nuxt 3. Only need 2 colors

[ineshbose]

I think the issue may be somewhere here? https://github.com/nuxt-modules/tailwindcss/blob/4781e6d3f5453237879c81c74ca08ce92be9b6e1/src/module.ts#L151-L154

I don't see a tailwind.config.mjs generated in my .nuxt directory. Could investigate for a PR.

Edit: it seems to be missing write: True, I'll open a PR