sails.js - 你如何配置sails + tailwindcss一起工作

Question

我一直在尝试使用 TailwindCSS用于全新造型 SailsJS地点。
从 tailwind CDN 引用预构建的 css工作正常，但为了自定义 css 并降低 css 大小以进行生产，我需要使用完整的 Assets 管道来构建顺风。
我遇到的问题是 tailwind recommends PostCSS ( tailwind also recommends PostCSS here ) 但 sailsjs uses grunt by default .理论上我可以配置 SailsJS 来运行 PostCSS，但我花了很长时间尝试，我对这些部分的缺乏了解意味着我还没有让它全部工作。
https://github.com/jeffjewiss/sails-hook-postcss看起来它可能会解决问题，但我无法让它工作。
有没有人让这两个一起工作，你是怎么做到的？公共(public)存储库链接将不胜感激。

这些是我对所有部分的各种未完成且尚未工作的尝试，以及其他相关资源:

https://github.com/timabell/spike-sails

https://github.com/timabell/spike-sails-gulp

https://github.com/timabell/sails-tailwind

https://dev.to/chrisfinnigan/setting-up-grunt-and-tailwindcss-2p1h

Answer 1

完整设置可在此处获得 https://github.com/tailwindlabs/tailwindcss-setup-examples/pull/97
转载在这里:

npm i --save-dev tailwindcss grunt-postcss postcss autoprefixer
npx tailwind init

/assets/styles/tailwindcss/tailwind.css :

@tailwind base;
@tailwind components;
@tailwind utilities;

tasks/config/postcss.js :

module.exports = function (grunt) {
  grunt.config.set("postcss", {
    options: {
      map: true,
      processors: [require("tailwindcss")("./tailwind.config.js")],
    },
    dist: {
      expand: true,
      cwd: "assets/styles/tailwindcss",
      src: ["tailwind.css"],
      dest: ".tmp/public/styles",
      ext: ".css",
    },
  });

  grunt.loadNpmTasks("grunt-postcss");
};

tasks/register/compileAssets.js :

module.exports = function (grunt) {
  grunt.registerTask("compileAssets", [
    "clean:dev",
    "less:dev",
    "copy:dev",
    "postcss", // add this one
  ]);
};

tasks/register/syncAssets.js

  grunt.registerTask("syncAssets", [
    "less:dev",
    "copy:dev",
    "postcss", // add this one
  ]);

sails lift