Any ways to add prefix for css rules generted by twind

[colgin]

code

const classNames = tw`${apply`p-1 text-red-500`}`

// classNames is like  tw-xxxx

I want to add a scope of this rule, like

html[name="abc"] .tw-xxx {
}

What should i do to make this work

[alker0]

Try this:

import { css } from 'twind/css';

const cssDirective = css({
  'html[name="abc"] &': apply`p-1 text-red-500`,
});

const className = tw(cssDirective);

Here you can see documents about above.

[colgin]

Thank you for your reply, but i want add a scope for all rules generated by twind, is there an easy way can make this work

[tmikaeld]

I'm looking for the same thing, any way possible.

Specifically: .rounded { border-radius: 0.25rem; } should be prefixed like header .rounded { border-radius: 0.25rem; }

[tmikaeld]

The closest I've found is: https://twind.style/reference#add-namespacescope-to-all-classes

But I don't think it works as expected? The example given:

defineConfig({
  hash(className) {
    return `.scoped ${className}`
  },
})

Produce CSS:

.\.scoped font-medium { font-weight: 500 }

UPDATE: Scoped tailwind seems to be a fools errand, since now the whole pages tailwind css need to be scoped too or it will interfere with the preciously or after scroped CSS.

[stale[bot]]

Hey folks. This issue hasn't received any traction for 90 days, so we're going to close this for housekeeping. If this is still an ongoing issue, please do consider contributing a Pull Request to resolve it. Further discussion is always welcome even with the issue closed. If anything actionable is posted in the comments, we'll consider reopening it. ⓘ