Using `hugo_stats` extractor for Tailwind 3?

#1

Now that Tailwind is in full JIT mode, the purge config is replaced by a content config. This way Tailwind can watch your layouts and generated the necessary classes.

It would be ideal to have it read the hugo_stats.json file but I can’t find a way.

Previously with Tailwind 2: under the purge key of `tailwind.config.js``

content: [
    './hugo_stats.json',
    './functions/.html',
    './layouts/**/*.html',
  ],
  extractors: [
    {
      extractor: (content) => {
        let els = JSON.parse(content).htmlElements;
        return els.tags.concat(els.classes, els.ids);
      },
      extensions: ['json']
    },
  ],

Now with Tailwind 3, following the doc I tried the following:

files: [
  './hugo_stats.json',
  './layouts/**/*.html',
],
extract: {
  'json': (content) => {
    let els = JSON.parse(content).htmlElements;
    return els.tags.concat(els.classes, els.ids);
  }
}

But I end up with a SyntaxError: Unexpected end of JSON input error.

Anybody managed to achieve this?

#2

Do you really need a custom extractor? Because I don’t use it and it works just fine with v3 and the generated hugo_stats.json file.

#3

On my setup, Tailwind does not read the hugo_stats.json content:

  {{ $class := print "bg-blue" "-800" }}
  <div class="{{ $class }}">
    Hello
  </div>

bg-blue-800 is not added.