I recently upgraded my Next.js project from version 12 to version 14 and Tailwind CSS from version 2.2.15 to 3.4.3. I’m using Tailwind CSS along with CSS Modules for styling. After the upgrade (including replacing the pages for app router and removing _app.tsx), I’ve noticed that the order of the CSS classes applied to my elements has changed. I updated a lot of files so I am struggling to find the reason for the change).

Here is the rendered HTML for an anchor element:
<a class="Anchor_anchor__cSc3P ParentLink_parentLink__wjwhX" href="/foo"><span class="">Bar</span></a>

With Next.js 12 and Tailwind CSS 2.2.15, the CSS looked like this:

.ParentLink_parentLink__wjwhX {
    color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.Anchor_anchor__cSc3P {
    color: rgba(127, 90, 56, var(--tw-text-opacity));
}

After upgrading to Next.js 14 and Tailwind CSS 3.4.3, the CSS now looks like this:

.Anchor_anchor__wnmj2 {
    color: rgba(127, 90, 56, 1);
    color: rgba(127, 90, 56, var(--tw-text-opacity));
}
.ParentLink_parentLink__Me3UJ {
    color: rgba(255, 255, 255, 1);
    color: rgba(255, 255, 255, var(--tw-text-opacity));
}

As you can see, the order in which the classes are applied has changed, with Anchor now coming before ParentLink.

I noticed that the css is being imported from a single file initially but now from 2 different files: layout.css and page.css but this is probably due to the fact the one is deployed

Question:

What could be causing this change in CSS class order after upgrading to Next.js 14 and Tailwind CSS 3.4.3? How can I ensure consistent ordering of my CSS classes?

Additional Information:

•   Tailwind CSS Version: 3.4.3 (upgraded from 2.2.15)
•   Next.js Version: 14 (upgraded from 12)

Any insights or suggestions on how to resolve this issue would be greatly appreciated!