Support Tailwind Prefix

[zSoulweaver]

Description

There is a PR looking to solve for this #3009 however I figured I would still raise the issue.

Having Nuxt UI respect the tailwind prefix would be handy to have to not overlap styles if components are being utilised on pages that already have existing styles with the same name and are not using tailwind.

Additional context

No response

[yooouuri]

+1

We are migrating from bulma to tailwind and (eventually Nuxt UI) the prefix is kinda mandatory for this migration

[saschafuchs]

This is super important, we need to use TW prefixes because the application we want to integrate our SPA into uses custom tailwind classes with !important. Without the prefixes the UI will not work

[franciscohermida]

Essential for me as well

[AverySJones]

+1 Cannot use Nuxt UI without prefix support since we're wanting to migrate from Bootstrap

[saschafuchs]

Somehow it is probably more important to overwrite a TW Color Token System instead of offering prefixes - which Tailwind has implemented for a reason. Not everyone needs this, but anyone who has to integrate their app into another application often experiences nasty surprises.

If nothing happens here, we will switch to Shadcn, which offers prefixing.

[cfroe]

I am encountering the same problem right now, our application is embedded in another website. While searching around I found different approaches. Perhaps someone can help, what could be possible and how. In Nuxt UI I don't see the possibilty to use a tailwind.config

1. Using prefix as mentioned in this thread
2. Using something like: postcss-prefix-selector
3. Importing tailwind css in a namespace
4. Add "important" to all styles in the namespace

Thx for any inspiration or help Christoph

[zAlweNy26]

Hi @cfroe I solved by creating a custom element with shadow root

[cfroe]

Hi @cfroe I solved by creating a custom element with shadow root

Thx for your fast response, could you explain more in detail, sorry I'm not so experienced with CSS.

1. Do I need to change or add something in the the main.css?

@import "tailwindcss";
@import "@nuxt/ui";
:root {

2. Set an id or whatever in the root HTML tag?
3. Add something in nuxt.config,ts?
4. Something else?

[maxdzin]

@benjamincanac is it supposed to be released soon?

[maxdzin]

Besides, thank you for implementing this long-awaited feature! It is a must-have for some complex projects, and I'm glad to try it soon.

[benjamincanac]

@maxdzin This will be released in the next minor but I don't have an exact ETA, probably around two weeks!