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

Question

我一直在尝试使用 TailwindCSS for the styling of a brand new SailsJS 网站。

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

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

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

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

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

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

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

How do you configure sails + tailwindcss to work together

sails.js

postcss

tailwind-css