Adding a custom prefix for tailwind 4.0

[DennisVulders]

Hey All,

We are currently upgrading our code from tailwind 3 to tailwind 4 and we (like many others) use the "tw-" prefix. While after searching for a while i did find out that prefixes can be added but it would then be used as tw:width-full for example. To make tailwind 4 more backwards compatible and in my personal opinion i think the readability of the "tw:" is worse than the "tw-" prefix, since the classes themselves are also kebab-case.

I know that we can still use the old config to do this, but it would be ideal if it is possible to use:
@import "tailwindcss" prefix(tw-); So that we can all use tw-w-full etc.

Hopefully this can be a feature in a future release of tailwind 4.x 🙂

[landykos]

@DennisVulders how do you set the prefix?

[landykos]

@DennisVulders Just tested your theory and this is working for me.

@import "tailwindcss" prefix(tw);

[DennisVulders]

Can you write the classes like this now? tw-w-full
because when i use @import "tailwindcss" prefix(tw); it only allows me to write the syntax like this tw:w-full

Could you share a https://play.tailwindcss.com/ link if you have it working with the dash instead of a column?

[landykos]

@DennisVulders After more testing we found that the only way we could get it working was with the syntax tw:w-full would be great to set it to tw- but could not get that working.

[anburocky3]

Have you figured out the way?

[t0dorakis]

I would also be interested, we have issues with scoping micro-frontends with different tailwind versions 👯

[rozsazoltan]

The prefix became a variant starting from v4, so Tailwind can now apply it at the very beginning of every class name. For example, in v3: tw-text-sky-500 hover:tw-text-sky-800, whereas from v4 onward: tw:text-sky-500 tw:hover:text-sky-800.

From a readability standpoint, it's debatable which approach is better, but in terms of functionality, handling it as a variant fits much more naturally into the TailwindCSS syntax than the v3-style prefix. I believe this won't change from v4 onward, and it won't be possible to revert to using the old prefixes.

[t0dorakis]

Maybe I'm on the wrong track in general, we searching for a way to scope a child-frontend with the help of prefixes so no parent (v3) to child (v4) class overrides are happening. In the best possible universe the class-prefixing would be handled during the compilation so nobody has to rethink the way classes are written in TW. If you have a solution in mind, I would be eager to hear about it!

[t0dorakis]

I figured out a way that works for my use-case — thanks for the reply though!

// global.css
@import './scoped.css';
@import 'tailwindcss/theme';
 
// scoped.css
#app {
  @import 'tailwindcss/utilities';
}