[Feature] Ability to set a tailwind prefix

[silverbackdan]

Is your feature request related to a problem? Please describe.

I am creating a module which will have some pre-defined pages and UI. To give the final Nuxt application complete freedom in choose their own way to style, I have included a css prefix in my tailwind config for the module specific UI. It would be great to use this UI kit if it could support a configurable prefix.

Describe the solution you'd like

Either to automatically detect the prefix configured in the tailwind configuration to apply, or have a config option to set a tailwind prefix and apply the styles for the UI components with the prefixes.

Describe alternatives you've considered

I could just take this UI kit as a guide and re-make each component and then add the prefixes in.. but it'd be nice to be using a stable package that's maintained with all this extra functionality if it's something you may consider integrating.

Additional context

Happy to provide a link to the module I'm creating if it helps https://github.com/components-web-app/cwa-nuxt-module/tree/nuxt3

[silverbackdan]

I suppose one approach could be to pass all styles through something like this https://github.vue.tailwind-prefix.cbass.dev/ which would apply the prefixes. I don't imagine this is a trivial feature to implement though and depends on your vision for the package. https://github.com/vesper8/vue-tailwind-prefix-applicator

[benjamincanac]

Hello @silverbackdan,

I admit that this would take a bit of time to implement and is not really a priority at the moment, but PRs are more than welcome 😊

[silverbackdan]

OK great, if we keep this issue here as a feature I'll see what I may be able to do.. We probably wouldn't want to change the classes all on the fly every time so I would most likely work it out so the module builds the app.config.ts import by parsing an input file and applying the prefixes like the prefix applicator application is doing. I'll see what I have time to try and contribute with a PR :)

[silverbackdan]

I'm trying to work with this package in dev to look at this feature but just getting setup is a challenge, I'm not sure the best way. I've forked the repo and then have it added via pnpm as a link. But then the sub-dependencies wouldn't install for the sub modules. Installed those manually too but then I just get errors like:

Failed to load url /@fs/[PATH]/nuxt-labs-ui/src/runtime/ui.css (resolved id: /Users/danielwest/Documents/GitHub/nuxt-labs-ui/src/runtime/ui.css) in virtual:nuxt:/[PATH[/_CWA/cwa-nuxt-3-module/playground/.nuxt/css.mjs. Does the file exist?

I'm adding the module as a local file link to my project like this ../../../nuxt-labs-ui/src/module as using the package name will expect the files to all be in dist.

Even if I've built the module and added the the package name then I get errors like this:

Failed to resolve import "#tailwind-config/theme/colors" from "../../nuxt-labs-ui/dist/runtime/plugins/colors.mjs". Does the file exist? 

It'd be handy to have a quick guide to contributing or a quick setup guide to use this module in dev :)

[benjamincanac]

Did you build the module? I've managed to make pnpm link working with pnpm link --global.

[silverbackdan]

I've just tried it that way round instead of just going a local dependency in the project I can install the module in to test.

Now this is the error:

Failed to resolve import "#tailwind-config/theme/colors" from "node_modules/.pnpm/@nuxthq+ui@2.4.0_rollup@2.79.1_vue@3.3.4_webpack@5.87.0/node_modules/@nuxthq/ui/dist/runtime/plugins/colors.mjs?v=53f11a23". Does the file exist? 

[silverbackdan]

I think I may be tired, this error seems like #tailwind-config alias which should be available from using @nuxtjs/tailwindcss has not been included

[silverbackdan]

I was also including the module @nuxtjs/tailwindcss in my nuxt config which caused this error when this module should be left alone to install it

[benjamincanac]

It is included through the exposeConfig when registering the @nuxtjs/tailwindcss module: https://github.com/nuxtlabs/ui/blob/dev/src/module.ts#L136

You should not have your own @nuxtjs/tailwindcss installed, more here https://ui.nuxtlabs.com/getting-started/installation

[silverbackdan]

Thanks @benjamincanac :)

[silverbackdan]

Is there a recommended way to load the module from src so I don't have to rebuild every time?

[benjamincanac]

You might be able to make it work through path like for the docs: https://github.com/nuxtlabs/ui/blob/dev/docs/nuxt.config.ts#L8

[silverbackdan]

Cool, thanks I'll try that - it's how I link to my module from a playground too so fingers crossed

[silverbackdan]

Nah I get all sorts of errors like this:

Failed to load url /@fs/Users/danielwest/Documents/GitHub/nuxt-labs-ui/src/runtime/ui.css (resolved id: /Users/danielwest/Documents/GitHub/nuxt-labs-ui/src/runtime/ui.css) in virtual:nuxt:/Users/danielwest/Documents/GitHub/_CWA/cwa-nuxt-3-module/playground/.nuxt/css.mjs. Does the file exist?

and

Failed to load url /@fs/Users/danielwest/Documents/GitHub/nuxt-labs-ui/src/runtime/utils/index.ts (resolved id: /Users/danielwest/Documents/GitHub/nuxt-labs-ui/src/runtime/utils/index.ts) in /Users/danielwest/Documents/GitHub/nuxt-labs-ui/src/runtime/plugins/colors.ts. Does the file exist?

Can't resolve the imports if I add the module that way.

Probably because it's outside my project root - I'm guessing I probably could if I add the module as a sub dir of the same project and then excluded it from my own git repo. I'll try that tomorrow. Thanks for quick advice.

[silverbackdan]

Any opposition to me creating a playground folder which can spin up like they do when using the new module templates? Might be nice just to be able to get the module running standalone and a basis for writing tests too in future?

[silverbackdan]

I'll add a playground like the starter module template does :) https://github.com/nuxt/starter/tree/module

[benjamincanac]

Indeed, a playground could be nice 😊

[silverbackdan]

Is there any info in the guide anywhere about issues if a user tried to configure tailwind with a tailwinf.config file as says can be done in the tailwind css module? Once a tailwind config is included in this way I get:

The outline-primary-500 class does not exist. If outline-primary-500 is a custom class, make sure it is defined within a @layer directive

Investigating now - sure it's related to the tailwindcss:config hook and merging on the configurations.

[benjamincanac]

This error happen when you define a primary color in your tailwind.config. You can read more here https://ui.nuxtlabs.com/getting-started/theming#colors

[silverbackdan]

The dummy tailwind config I'm adding is just

// tailwind.config.cjs
/** @type {import('tailwindcss').Config} */
module.exports = {
  prefix: 'cwa-'
}

Simply adding this file causes the error.

[benjamincanac]

Is it doing the same thing with a tailwind.config.ts?

[silverbackdan]

Yup - my branch with a playground running is up to date for this PR https://github.com/nuxtlabs/ui/pull/322

Can just run pnpm dev:playground:prepare and pnpm dev:playground to work on dev with this module now with the updates so far :)

[silverbackdan]

On the plus side, when I've cracked this, the prefix will be available in the tailwind:config hook and I should be able to relatively easily create a app.config with the classes using the configured prefix - I can see when I add the config file in this becomes available

[silverbackdan]

Very odd though.

Tailwind config passed to the hook with the file added

{ content:                                                                                                                                                                                                                                 1:39:35 PM
   { files:
      [ '/Users/danielwest/Documents/GitHub/nuxt-labs-ui/playground/components/**/*.{vue,js,ts}',
        '/Users/danielwest/Documents/GitHub/nuxt-labs-ui/playground/layouts/**/*.vue',
        '/Users/danielwest/Documents/GitHub/nuxt-labs-ui/playground/pages/**/*.vue',
        '/Users/danielwest/Documents/GitHub/nuxt-labs-ui/playground/composables/**/*.{js,ts}',
        '/Users/danielwest/Documents/GitHub/nuxt-labs-ui/playground/plugins/**/*.{js,ts}',
        '/Users/danielwest/Documents/GitHub/nuxt-labs-ui/playground/utils/**/*.{js,ts}',
        '/Users/danielwest/Documents/GitHub/nuxt-labs-ui/playground/App.{js,ts,vue}',
        '/Users/danielwest/Documents/GitHub/nuxt-labs-ui/playground/app.{js,ts,vue}',
        '/Users/danielwest/Documents/GitHub/nuxt-labs-ui/playground/Error.{js,ts,vue}',                      
        '/Users/danielwest/Documents/GitHub/nuxt-labs-ui/playground/error.{js,ts,vue}',
        '/Users/danielwest/Documents/GitHub/nuxt-labs-ui/playground/app.config.{js,ts}',
        '/Users/danielwest/Documents/GitHub/nuxt-labs-ui/src/runtime/components/**/*.{vue,mjs,ts}',
        '/Users/danielwest/Documents/GitHub/nuxt-labs-ui/src/runtime/*.{mjs,js,ts}' ],
     transform: { vue: [Function: vue] },
     extract: { vue: [Function: vue] } },
  theme: { extend: {} },
  plugins:
   [ { __options: [Object], handler: [Function (anonymous)], config: {} },
     { handler: [Function (anonymous)], config: [Object] },
     { [Function: optionsFunction]
       __isOptionsFunction: true,
       __pluginFunction: [Function (anonymous)],
       __configFunction: [Function (anonymous)] },
     { handler: [Function: containerQueries], config: [Object] } ],
  darkMode: 'class',
  prefix: 'cwa-' }

And when the file does not exist it's

{ content:                                                                                                                                                                                                                                 1:40:12 PM
   { files:
      [ '/Users/danielwest/Documents/GitHub/nuxt-labs-ui/playground/components/**/*.{vue,js,ts}',
        '/Users/danielwest/Documents/GitHub/nuxt-labs-ui/playground/layouts/**/*.vue',
        '/Users/danielwest/Documents/GitHub/nuxt-labs-ui/playground/pages/**/*.vue',
        '/Users/danielwest/Documents/GitHub/nuxt-labs-ui/playground/composables/**/*.{js,ts}',
        '/Users/danielwest/Documents/GitHub/nuxt-labs-ui/playground/plugins/**/*.{js,ts}',
        '/Users/danielwest/Documents/GitHub/nuxt-labs-ui/playground/utils/**/*.{js,ts}',
        '/Users/danielwest/Documents/GitHub/nuxt-labs-ui/playground/App.{js,ts,vue}',
        '/Users/danielwest/Documents/GitHub/nuxt-labs-ui/playground/app.{js,ts,vue}',
        '/Users/danielwest/Documents/GitHub/nuxt-labs-ui/playground/Error.{js,ts,vue}',
        '/Users/danielwest/Documents/GitHub/nuxt-labs-ui/playground/error.{js,ts,vue}',
        '/Users/danielwest/Documents/GitHub/nuxt-labs-ui/playground/app.config.{js,ts}',
        '/Users/danielwest/Documents/GitHub/nuxt-labs-ui/src/runtime/components/**/*.{vue,mjs,ts}',
        '/Users/danielwest/Documents/GitHub/nuxt-labs-ui/src/runtime/*.{mjs,js,ts}' ],
     transform: { vue: [Function: vue] },
     extract: { vue: [Function: vue] } },
  theme: { extend: {} },
  plugins:
   [ { __options: [Object], handler: [Function (anonymous)], config: {} },
     { handler: [Function (anonymous)], config: [Object] },
     { [Function: optionsFunction]
       __isOptionsFunction: true,
       __pluginFunction: [Function (anonymous)],
       __configFunction: [Function (anonymous)] },
     { handler: [Function: containerQueries], config: [Object] } ],
  darkMode: 'class' }

As expected, just the prefix difference. Everything else runs the same... odd

[silverbackdan]

Ah... it's the prefix of course :P

[silverbackdan]

primary probably becomes cwa-primary in this case

edit: sorry not that, outline-primary will be cwa-outline-primary etc. I can work through this :)

[silverbackdan]

The PR is almost there, it's mostly working except for this dark mode thing. I'm trying to work out whether the bug is somewhere in this module or in the nuxt tailwindcss module when dark mode is enabled as well as a configured prefix

[silverbackdan]

Got it, just working out how to make it dynamic now, needed the classPrefix in the color-mode module too

[albertcito]

@silverbackdan how do you fix this issue. I'm getting a similar issue in muy local 😬 when I run npm run lint

Unable to resolve path to module '#tailwind-config/theme/colors' import/no-unresolved

---

I've just tried it that way round instead of just going a local dependency in the project I can install the module in to test.

Now this is the error:

Failed to resolve import "#tailwind-config/theme/colors" from "node_modules/.pnpm/@nuxthq+ui@2.4.0_rollup@2.79.1_vue@3.3.4_webpack@5.87.0/node_modules/@nuxthq/ui/dist/runtime/plugins/colors.mjs?v=53f11a23". Does the file exist? 

[silverbackdan]

Hmm I can't remember what I did, but it was in relation to the PR I was doing to dd a playground and configurable prefix. As the prefix was going to need to be split and the playground would be a separate PR it was unfortunately not something I had time to continue with just yet, if you have a look at the PR you may be able to trace this issue - I wish I could remember what the fix was for this but it's been a while and it's tough when lots of different bugs and tasks to do each day. Sorry I can't be more help immediately.

[benjamincanac]

@silverbackdan Should we close this for now?

[silverbackdan]

Yes I think anything related can be in the PR :) https://github.com/nuxt/ui/pull/322

[benjamincanac]

Oh sorry, I was talking about your PR!

[silverbackdan]

Ah OK - what do we think about the idea for implementing the prefix, I thought with the playground testing it was pretty solid and very useful to be able to use this package in a Nuxt module. E.g. in my module with components that are styled, I want to use a prefix so tailwind classes won't clash in the main application if they use tailwind too. Although... in My use case I'm using my own components now, although some are heavily based on these Nuxt UI components (I'm crediting in the comments ofc.)

Hmm.... I guess it depends on what direction you wanted to take this package too. Did anyone ever pop on to implement the testing playground?

[benjamincanac]

We already have a playground: https://github.com/nuxt/ui/tree/dev/playground

[silverbackdan]

Ah ha, nice to see that part got implemented since the PR was opened. Great! :)

[brendonmatos]

any news on that? I think would be interesting since it's intended to be used to create Layers and Modules

[silverbackdan]

I had implemented the work in a PR but all I was asked was to split out the playground and the prefix work. The playground has since been implemented. I also am unsure how I can use this in a module as it needs to use the module in a nuxt application so hasn't felt like you can just use the components via imports.

[hiepvq]

When i set prefix value:

module.exports = {
  prefix: 'a-'
}

[11:03:43 AM] ERROR [postcss] D:/Project_Vue/ddddd/node_modules/@nuxt/ui/dist/runtime/ui.css:6:3: The outline-primary class does not exist. If outline-primary is a custom class, make sure it is defined within a @layer directive.

[silverbackdan]

Hi, sorry I abandoned this PR for a number of reasons in my own use case right now. It had been working, and I thought the playground I'd initially setup was testing it, but since, another PR introduced the playground without this prefix feature and I needed to continue in other ways that would not block the progress on my project unforuntately.

Feel free to pick it back up and debug, by taking a look at what I implemented and applying it to how the package has developed in the meantime.

Closing for now. Reach out if I can help.

[khusainovrm]

https://tailwindcss.nuxtjs.org/tailwind/config#config-option

Finally it works. Just add in nuxt.confg: tailwindcss: { config: { prefix: "tw-", }, },

[benjamincanac]

@khusainovrm This won't work with @nuxt/ui unless you want override all the config classes, here is juste the button for example: https://github.com/nuxt/ui/blob/dev/src/runtime/ui.config/elements/button.ts