postcss - 带有 Tailwind 和 postcss 的 Hexo

Question

我正在尝试将 tailwind 与 hexo 结合使用。看起来来自 https://tailwindcss.com/docs/installation/#using-tailwind-with-postcss我需要连接 postcss 所以我基于 https://github.com/chuangker/hexo-renderer-postcss

我尝试更改渲染器来读取

"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;
        });
};

这将我的 css 文件中的 @import "tailwindcss/base"; 正确转换为 @tailwind base ，但我似乎无法将 tailwind 应用于:

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

或

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

这就是我需要帮助的地方

Answer 1

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

我让它与以下内容一起工作:

渲染器.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': {},
  }
}