如何配置 sails + tailwindcss 协同工作

Question

我一直在尝试使用TailwindCSS来设计全新的SailsJS网站的样式。

从tailwind CDN引用预构建的 css效果很好，但为了自定义 css 并缩小 css 大小以进行生产，我需要使用完整的资源管道来构建 tailwind。

我遇到的问题是tailwind 推荐使用 PostCSS（这里 tailwind 也推荐使用 PostCSS）但是sailsjs 默认使用 grunt。理论上，我可以配置 SailsJS 来运行 PostCSS，但我花了很长时间尝试，而且我对各个部分缺乏了解，这意味着我还没有让它全部正常工作。

https://github.com/jeffjewiss/sails-hook-postcss看起来它可以解决问题，但我无法让它工作。

有人让这两个一起工作吗？你是怎么做到的？公共存储库链接将不胜感激。

---

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

• 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