feat(exposeConfig): nested properties

[ineshbose]

While working on #582, I've also looked into how to create exports for nested properties in the large tailwind configuration, and these properties can be accessed using exports in camelCase. There have been use-cases (for me at least) where I need a small part of the configuration, such as theme.screens or theme.colors.neutral instead of all of theme (which is quite big), so I can just do

import { themeScreens, themeColorsNeutral } from '#tailwind-config'

and that should do it!

I believe this isn't a major requirement right now, and may need feedback as well (hence I'm also putting this as a draft PR).

Edit: see changes at this point through - main...ineshbose:nuxt-tailwindcss-module:ba8bf7e2f3e1d907e0ab7b1a29a03dfd6d0bcde7

[ineshbose]

If this approach isn't desirable, potentially this can be altered to have each object as a module (eg #tailwind-config/theme)?

tailwindcss/src/module.ts

Line 163 in 96adbbd

nuxt.options.alias['#tailwind-config'] = template.dst

[ineshbose]

Refactored to use templates instead (still need to look into type declarations). Example usage would be:

import screens from '#tailwind-config/theme/screens' // or import { _screens } from '#tailwind-config/theme'
import neutral from '#tailwind-config/theme/colors/neutral' // or import { _neutral } from '#tailwind-config/theme/colors'

Admittedly, these are a lot of files, so the previous approach can be considered if required.

Note: import { theme, content, /* etc */ } from '#tailwind-config' remain valid.

[ineshbose]

Updated function to allow developers to choose how deep they want the templates to go. There's also a commented-out condition that can give the option to not create exports for single non-object values if required (tried to merge it with the previous condition using Object.entries(value) but doesn't work).

[Atinux]

Sorry for the late answer, updated the level to start a 1 (which makes sense IMO, 0 being the whole tailwind.config).

This means tat exposeLevel: 2 will expose

And more, easy to check with http://localhost:3000/_vfs

I am happy with current state, could you please update the documentation to explain those changes and the benefits of it please?

[nuxt-studio-dev]

✅ Deploy Preview for tailwindcss ready!

Name	Link
🔨 Latest commit	f1296b3
😎 Deploy Preview	https://tailwindcss.nuxt.dev?preview=d5eb868da46c169cefff2d0db0b5c38f

---

[ineshbose]

Updated docs (also for inclusive language), and added a test. My concern is still with type definitions I feel!

Edit: I've reverted the changes to the .d.ts file contents, so the nested imports would be untyped - adding type support for them could be a separate PR if you'd like.

Also want to confirm about #tailwind-config/* pointing to .nuxt/tailwind.config/* rather than .nuxt/tailwind.config.mjs (for eg, test import { _slate } from '#tailwind-config/theme/colors' in playground/pages/index.vue and see if you get an error).

[Atinux]

Beautiful work!