Closed royalfig closed 1 year ago
To add Tailwind to the Starter theme:
npm install -D tailwindcss autoprefixer
npx tailwindcss init
/** @type {import('tailwindcss').Config} */
export default {
theme: {
extend: {},
},
plugins: [],
content: [
"/*.hbs",
"./**/*.hbs",
]
}
Include Tailwind base styles
@tailwind base;
@tailwind components;
@tailwind utilities;
// Update the imports
import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';
// Update the postcss config
postcss({
extract: true,
plugins: [
tailwindcss,
autoprefixer
]
}),
That should do it.
I am running into a bit of a speed bump with this process. So far I have done the following:
cd
into an empty directory then ran the command ghost install local
then cd content/themes
followed by git clone https://github.com/TryGhost/Starter.git ghost-with-tailwind
then cd ghost-with-tailwind
and yarn install
Pretty basic/straightforward. Then I implement your steps but when I run ghost restart
I do not see any changes to the page on localhost when I change/update default.hbs
. It seems local host is grabbing the content from casper
and isn't running from the newly created ghost-with-tailwind
directory. What am I missing?
Here is a video showing what I am seeing.
Have you activated the theme from Ghost Admin? This isn't the best place for support, so if you still have trouble, I recommend coming over to the official Ghost Forum. We'll get you sorted!
Thanks @royalfig for the guidance, I appreciate it.
EDIT: from localhost:2368/ghost I had missed the step that required that I go into Settings > Design > Change Theme and activating the new TailwindCSS starter.
Tailwind is not working with livereload I guess
@rosu-catalin What are you experiencing exactly?
This might be a bug with the postcss plugin. I'll do some more investigation and follow up.
While I'm using rollup for live reload with Tailwind, it's kind of blocked in a reload loop, as you can see in the video below.
I believe this is caused by a bug in the postcss
plugin we're using: https://github.com/egoist/rollup-plugin-postcss/issues/414
I'm trying to see if there's a workaround.
After some experimentation, here's what I found to be the best way to use Tailwind here (given the bug in the postcss plugin).
The solution is to use Tailwind's CLI tool alongside Rollup. Where Tailwind processes the CSS from HBS files, Rollup handles all the JS.
npm i -D concurrently tailwindcss
assets/js/index.js
assets/css/index.css
with the standard Tailwind directives:
@tailwind base;
@tailwind components;
@tailwind utilities;
postcss
sections from rollup.config.js
dev
and build
scripts in package.json
:
"dev": "concurrently \"rollup -c --environment BUILD:development -w\" \"npx tailwindcss -i ./assets/css/index.css -o ./assets/built/index.css --watch\" ",
"build": "rollup -c --environment BUILD:production && npx tailwindcss -i ./assets/css/index.css -o ./assets/built/index.css --minify",
Works now! Thanks a lot
Originally posted by @Isaac-Tait in https://github.com/TryGhost/Starter/issues/60#issuecomment-1513963799