你如何配置sails + tailwindcss一起工作答案

【问题标题】：How do you configure sails + tailwindcss to work together你如何配置sails + tailwindcss一起工作
【发布时间】：2021-02-24 22:48:23
【问题描述】：

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

从 tailwind CDN 引用预构建的 css 可以正常工作，但为了自定义 css 并降低 css 大小以用于生产，我需要使用完整的资产管道来构建顺风。

我遇到的问题是tailwind recommends PostCSS (tailwind also recommends PostCSS here) 但sailsjs uses grunt by default。理论上我可以将 SailsJS 配置为运行 PostCSS，但我花了很长时间尝试，而且我对这些部分缺乏了解意味着我还没有让它全部工作。

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

有没有人让这两者一起工作，你是怎么做到的？非常感谢公共存储库链接。

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

【问题讨论】：

这可能是答案github.com/tailwindlabs/tailwindcss-setup-examples/pull/97/…
是的，稍作修改，请参阅 PR cmets 进行修改

标签： sails.js tailwind-css postcss

【解决方案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

【讨论】：