How to add Tailwindcss to the Starter theme

[royalfig]

          Hello @royalfig I am looking into using TailwindCSS for my custom Ghost theme. I came across [this](https://forum.ghost.org/t/a-guide-for-developing-ghost-themes-with-tailwindcss/35680) post on the Ghost Forum. However, it is for the Gulp "configuration". If you have any pointers/ideas on how to get TailwindCSS implemented with Rollup I would appreciate it (I did try [this](https://forum.ghost.org/t/a-guide-for-developing-ghost-themes-with-tailwindcss/35680) plugin but it doesn't seem to be working). Cheer!

Originally posted by @Isaac-Tait in #60 (comment)

[royalfig]

To add Tailwind to the Starter theme:

Install the dependencies

npm install -D tailwindcss autoprefixer

Create a Tailwind config

npx tailwindcss init

Update the Tailwind config

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {},
  },
  plugins: [],
  content: [
    "/*.hbs",
    "./**/*.hbs",
  ]
}

Update CSS

Include Tailwind base styles

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

Update Rollup config

// 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.

[Isaac-Tait]

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.

[royalfig]

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!

[Isaac-Tait]

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.

[Rosu-Catalin]

Tailwind is not working with livereload I guess

[royalfig]

@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.

[Rosu-Catalin]

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.

https://www.youtube.com/watch?v=O168MB8iVt8

[royalfig]

I believe this is caused by a bug in the postcss plugin we're using: egoist/rollup-plugin-postcss#414

I'm trying to see if there's a workaround.

[royalfig]

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.

1. npm i -D concurrently tailwindcss
2. Remove the CSS import from assets/js/index.js
3. Update assets/css/index.css with the standard Tailwind directives:

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

4. Remove the postcss sections from rollup.config.js
5. Update the 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",

6. Remove and/or uninstall unused CSS/JS/packages

[Rosu-Catalin]

Works now! Thanks a lot

[BondAnthony]

Thank you! This helped me get started and I was able to keep the existing styles by importing the tailwindcss declarations from node_modules. This allows you to keep the postcss configurations and the assets/js/index.js import. https://tailwindcss.com/docs/using-with-preprocessors

example

@import "tailwindcss/base";
@import "./custom-base-styles.css";

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";
@import "./custom-utilities.css";