content.transform doesn't work in next.js

[MrOxMasTer]

What version of Tailwind CSS are you using?

For example: v3.4.3

What build tool (or framework if it abstracts the build tool) are you using?

For example: postcss 8.4.38, Next.js 14.2.3

What version of Node.js are you using?

v20.12.2

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction URL

https://codesandbox.io/p/devbox/next-js-tailwindcss-custom-classes-d33py9?file=%2FcreateTransform.ts%3A20%2C3&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clwccx61y00063o6gsxauagus%2522%252C%2522sizes%2522%253A%255B71.10132158590308%252C28.89867841409692%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clwccx61y00023o6g2t4tzm3m%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clwccx61y00043o6gjjszsvyt%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clwccx61y00053o6gik44ilyf%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B61.695584680984865%252C38.304415319015135%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clwccx61y00023o6g2t4tzm3m%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clwccx61y00013o6ghresmuzp%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clwcdpfny00023o6g8n3n391p%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fmatchers.txt%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clwck4kgl00023o6gg7uprh8c%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A5%252C%2522startColumn%2522%253A22%252C%2522endLineNumber%2522%253A5%252C%2522endColumn%2522%253A61%257D%255D%252C%2522filepath%2522%253A%2522%252Fapp%252Fpage.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clwckqjba00023o6gi6whurku%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A20%252C%2522startColumn%2522%253A3%252C%2522endLineNumber%2522%253A20%252C%2522endColumn%2522%253A3%257D%255D%252C%2522filepath%2522%253A%2522%252FcreateTransform.ts%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clwccx61y00023o6g2t4tzm3m%2522%252C%2522activeTabId%2522%253A%2522clwckqjba00023o6gi6whurku%2522%257D%252C%2522clwccx61y00053o6gik44ilyf%2522%253A%257B%2522id%2522%253A%2522clwccx61y00053o6gik44ilyf%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A3000%252C%2522id%2522%253A%2522clwcl648p009p3o6gb0q9kywy%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clwcl648p009p3o6gb0q9kywy%2522%257D%252C%2522clwccx61y00043o6gjjszsvyt%2522%253A%257B%2522id%2522%253A%2522clwccx61y00043o6gjjszsvyt%2522%252C%2522activeTabId%2522%253A%2522clwcl6cop00dx3o6gslrzcz9x%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522id%2522%253A%2522clwcl6cop00dx3o6gslrzcz9x%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Describe your issue

I realize that next.js has its own compiler (turbo included), but it's just strange that this function is ignored by next.js altogether

For example, I gave the example above with transformation and in the file ./transformContent.txt the results of the change were reflected in line 67 (the link in page.tsx in line 45 was changed), but it doesn't work.

I thought it would work in tandem next.js and tailwindcss, but the changes in tailwindcss are ignored.

I know an approximate solution:
Taking the webpack (or turbo) field in next.config.js and prescribing the logic, but the fact that content.transform doesn't work is there

[wongjn]

content.transform is used to change the file content that Tailwind sees before Tailwind scans for classes. The transformation result is then discarded after Tailwind has scanned the file. Next.js does not interact with this Tailwind configuration option.

This means that transforming does mean that the classes like hover:border-gray-300, hover:bg-gray-100, hover:dark:border-neutral-700, etc. get generated by Tailwind. However the rendered HTML still has the original classes like hover:(border-gray-300, bg-gray-100, dark:border-neutral-700, etc. that don't match the Tailwind generated classes. You'd need to look at matching the same transformation logic in Next.js if you want the class names to be transformed in the HTML that Next.js renders.