3

I'm trying to use tailwind with hexo. It looks from https://tailwindcss.com/docs/installation/#using-tailwind-with-postcss that I need wire up postcss so I have based myself on https://github.com/chuangker/hexo-renderer-postcss

I tried changing the renderer to read

"use strict";

var postcss = require("postcss");
var postcssrc = require("postcss-load-config");
var atImport = require("postcss-import");

console.log("postcss2 registering");

module.exports = function(data) {
    console.log("postcssrc", data);
    return postcssrc()
        .then(({ plugins, options }) => {
            console.log("tailwind", plugins, options);
            return postcss(plugins)
                .use(atImport())
                .process(data.text, options);
        })
        .then(result => {
            console.log("tailwind 2", result);
            return result.css;
        });
};

This is converting @import "tailwindcss/base"; in my css files to @tailwind base correctly, but I cant seem to get tailwind applied to that with:

module.exports = {
    from: undefined,
    plugins: {
        tailwindcss: require("tailwindcss")
    }
};

or

module.exports = {
    from: undefined,
    plugins: [require("tailwindcss")]
};

So that's where I need help

Simon H
  • 20,332
  • 14
  • 71
  • 128

1 Answers1

0

Can check out the plugin I made for this hexo-renderer-tailwindcss

I got it working with the following:

renderer.js

'use strict'

var postcss = require('postcss')
var postcssrc = require('postcss-load-config')

module.exports = function (data) {
  return postcssrc().then(({
      plugins,
      options
    }) => postcss(plugins).process(data.text, options))
    .then((result) => result.css)
}

hexo-render-postcss.js

'use strict'

var renderer = require('../libs/postcss/renderer')

hexo.extend.renderer.register('css', 'css', renderer)

hexo root .postcssrc.js

module.exports = {
  from: undefined,
  plugins: {
    'postcss-import': {},
    'tailwindcss': {},
    'autoprefixer': {},
  }
}
bennyxguo
  • 845
  • 6
  • 15