TailwindCSS | Custom Transform Before Exctraction
Context
I was trying to make Hugo work correctly with
TailwindCSS 3.x which now uses jit by default and
this causes to changes in classes in template files by ignored by Hugo’s
pipes. In previous versions, this was
possible by adding new
extractor
to tailwind.config.js. In the end, this solution was a dead end for my issue. But for
future reference, I thought I should create an example for myself.
Question
How to add custom content.trasnform to tailwind.config.js
Answer
From docs:
When using
content.transform, you’ll need to provide your source paths usingcontent.filesinstead of as a top-level array under content.
Following example from CSS purging with PostCSS we could do following
+ content: {
+ files: ["./src/layouts/**/*.{html,js}", "./src/hugo_stats.json"],
+ transform: {
+ json: (content) => {
+ let els = JSON.parse(content).htmlElements;
+ return `${els.classes.join(" ")}`;
+ },
+ },
+ },
What I Learned
In the beginning I thought it would be possible to same trick with
content.extract
but it turns out, extract process content line by line. This is why, for TailwindCSS >= 3.x we should use content.transform which runs on whole file.