content.transform
doesn't work in next.js
#13706
-
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 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 I thought it would work in tandem next.js and tailwindcss, but the changes in tailwindcss are ignored. I know an approximate solution: |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
This means that transforming does mean that the classes like |
Beta Was this translation helpful? Give feedback.
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 likehover:(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 name…