Migrating from V3 to V4

[Baertie]

Hi everyone!

I have a question. Right now i am running a project with tailwindcss 3.4.1. And we want to migrate to V4.
The thing is that we tried it when i got released and a lot broke so we decided to shelf it for a while.
Now we are revisiting the upgrade. The thing is that for some components we have seperate css files. Those files use the @apply.

But for some reason that does not work out of the box anymore.

Like for example this.

.header {
  @apply sticky top-0 z-40 bg-white shadow;
}
/* Header Item Styles */
.header-item {
  @apply inline-flex gap-x-1.5 justify-center items-center px-1 h-full font-medium border-b-2 cursor-pointer text-[0.6875rem];
}
.header-item-active {
  @apply text-gray-900 border-primary-500;
}
.header-item-inactive {
  @apply text-gray-600 border-transparent hover:border-gray-300 hover:text-gray-700;
}

/* Mobile Header Styles */
.mobile-header-container {
  @apply flex overflow-x-auto overflow-y-hidden px-2 space-x-8 w-full h-12 border-t sm:justify-center md:hidden;
}
.mobile-header-item {
  @apply px-1 pt-1 space-y-2 text-xs font-medium whitespace-nowrap border-b-2 flex-col-items-center;
}
.mobile-header-item-active {
  @apply text-gray-900 border-primary-500;
}
.mobile-header-item-inactive {
  @apply text-gray-600 border-transparent hover:border-gray-300 hover:text-gray-700;
}

/* Header Mobile Item Styles */
.header-mobile-item {
  @apply block py-2 pr-4 pl-3 text-base font-medium border-l-4;
}
.header-mobile-item-active {
  @apply text-primary-700 border-primary-500 bg-slate-100;
}
.header-mobile-item-inactive {
  @apply text-gray-600 border-transparent hover:border-gray-300 hover:bg-gray-50 hover:text-gray-700;
}

/* General Header Item Styles */
.general-header-item {
  @apply inline-flex items-center px-3 py-2 font-medium text-gray-900 whitespace-nowrap rounded-md cursor-pointer text-[0.8125rem];
}
.general-header-item-active {
  @apply bg-gray-100;
}
.general-header-item-inactive {
  @apply hover:bg-gray-50 hover:text-gray-900;
}

What is the correct way in the way of V4. Also i know that the creator prefers using the multi edit way but we do not want that.

So i am curious about your approach!

Thanks!

[rozsazoltan]

Related:

• @reference directive
• Make TailwindCSS v4 not ignore CSS files
• Tailwind is not getting applied to individual components
• Alternatives instead of @apply