How do you configure sails + tailwindcss to work together

Tim_Abell_10245 0
Viewed 422

I've been trying to use TailwindCSS for the styling of a brand new SailsJS site.

Referencing the pre-built css from the tailwind CDN works fine, but in order to customize the css and bring the css size down for production I need to use the full asset pipeline to build tailwind.

The problem I've run into is that tailwind recommends PostCSS (tailwind also recommends PostCSS here) but sailsjs uses grunt by default. In theory I can configure SailsJS to to run PostCSS but I spent a long time trying and my lack of knowledge of the pieces means I've yet to get it all working.

https://github.com/jeffjewiss/sails-hook-postcss looked like it might solve the problem but I couldn't get it working.

Has anyone got these two working together, and how did you do it? Public repository links would be greatly appreciated.

These are my various unfinished and not yet working attempts at all the pieces, plus other related resources:

postcss tailwind-css sails.js
1 Answers

The full setup is available here https://github.com/tailwindlabs/tailwindcss-setup-examples/pull/97

Reproduced here:

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
Tim_Abell_102450
Related