Adding Tailwind to Ghost's Foundry Factory preset.
- Added a templates folder (its on the gulpfile, could be handy to have the folder already created by the preset)
- 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();
});
...
- linked project and tested (used
ready
hook to render the app) npm install -D tailwindcss postcss autoprefixer gulp-postcss
npx tailwindcss init -p
(will createtailwind.config.js
andpostcss.config.js
on root dir)- 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-', // <--------
}
- Added Tailwind directives to the module's css file
@tailwind base;
@tailwind components;
@tailwind utilities;
// the rest of the file
- 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`));
}
- 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>
npm run build
-> classes work!
For some reason, it doesn't seem to be working on watch mode.