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?