[v4] Upgrade does not handle prefix for group `tw-group` → `tw:group`

[sajoku]

Version: v3.4.14
Build tools: Bun
Reproduction URL: https://github.com/sajoku/tailwind-4-upgrade-test

It looks like the group attribute is not being targeted by the upgrade script.
When running the npx @tailwindcss/upgrade@next command it will update all the correct things except for the tw-group definition.

Instructions on the reproduction repository:

1. Clone
2. Run npx @tailwindcss/upgrade@next

Before CSS:

@config 'tailwind.config.js';

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind screens;



h1 {
  @apply tw-bg-black tw-bg-red-50;
}

div {
  @apply tw-group;
}

span {
  @apply tw-text-base tw-font-semibold tw-text-gray-900 tw-text-left tw-group;
}

After CSS:

@import 'tailwindcss' prefix(tw);

@variant dark (&:is(.dark *));

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

h1 {
  @apply tw:bg-black tw:bg-red-50;
}

div {
  @apply tw-group;
}

span {
  @apply tw:text-base tw:font-semibold tw:text-gray-900 tw:text-left tw-group;
}

Am I correct in assuming that the tw-group should be migrated to tw:group?

[ruby05guy]

The shift from tw-group to tw:group is an excellent example of how Tailwind evolves to be more intuitive and aligned with CSS best practices. It’s always a bit tricky when certain things don’t get caught by the upgrade tools, but it’s part ProsperidadSocial of the learning journey.

[adamwathan]

Should be fixed in v4.0.0-beta.3 which is out now!