Adding TailwindCSS to Foundry Factory's Ghost preset

fvtt-factory-ghost-preset-tailwindcss.md

Adding Tailwind to Ghost's Foundry Factory preset.

1. Added a templates folder (its on the gulpfile, could be handy to have the folder already created by the preset)
2. created a little TestApp with a test template:

<!-- on src/templates/app.html -->
<div>
    <p>Hello World</p>
</div>

// on src/module/test-app.js
export default class TestApp extends Application {
  constructor() {
    super();
  }

  static get defaultOptions() {
    const options = super.defaultOptions;
    options.template = 'modules/ghost-preset-tailwind/templates/app.html';
    options.width = 300;
    options.height = 300;
    options.resizable = false;
    return options;
  }

  open() {
    this.render(true);
  }
}

// on src/module/{project-name}.js
...
Hooks.once('ready', async () => {
  const app = new TestApp();
  app.open();
});
...

3. linked project and tested (used ready hook to render the app)
4. npm install -D tailwindcss postcss autoprefixer gulp-postcss
5. npx tailwindcss init -p (will create tailwind.config.js and postcss.config.js on root dir)
6. on tailwind.config.js:

• filled the content array
• removed preflight to prevent Tailwind from breaking some foundry styles
• added a prefix to prevent possible class collisions (this could be built from the project name probably?)

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js,ts}'], // <--------
  corePlugins: {
    preflight: false, // <--------
  },
  theme: {
    extend: {},
  },
  plugins: [],
  prefix: 'gpt-', // <--------
}

7. Added Tailwind directives to the module's css file

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

// the rest of the file

8. On gulpfile.js:

...
const postcss = require('gulp-postcss');
const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer');
...
// replaced buildStyles with this one

 function buildStyles() {
  return gulp
    .src(`${stylesDirectory}/${name}.${stylesExtension}`)
    .pipe(postcss([tailwindcss('./tailwind.config.js'), autoprefixer]))
    .pipe(gulp.dest(`${distDirectory}/styles`));
}

9. Added tailwind classes on the test app template; e.g.:

<div class='gpt-bg-black'>
    <p class='gpt-text-blue-200'>Hello World</p>
</div>

10. npm run build -> classes work!

For some reason, it doesn't seem to be working on watch mode.