devops/how-to-use-tailwind-css-with-jekyll-on-github-pages

[utterances-bot]

How to use Tailwind CSS with Jekyll on GitHub Pages · OhSoStatic Jekyll

OhSoStatic Jekyll is built with Jekyll, styled with Tailwind CSS, and hosted on GitHub Pages. That combination doesn’t quite work out of box. Tailwind CSS requires PostCSS to compile and while Jekyll has a PostCSS plugin, it’s not currently whitelisted, meaning Tailwind CSS won’t be included in the default build produced by GitHub Pages. Let’s fix this via GitHub Actions.

https://jekyll.ohsostatic.com/devops/how-to-use-tailwind-css-with-jekyll-on-github-pages

[intergalacticmammoth]

Hey!

That's a pretty sweet tutorial.

I noticed something weird happening though: when the workflow we defined runs it removes the custom domain in Settings->Pages->Custom domain every time it's run, and I have to change it back manually. Do you have any idea how to fix this?

Best

[intergalacticmammoth]

Found the answer in the peaceiris/actions-gh-pages documentation

You should add cname: <domain-name> at the end of the workflow yaml, like so:

with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./_site
          cname: your-custom-domain.com

[willanderson]

Hey, thanks for this detailed write up. After following your guide, I'm getting the following error when running github-pages.yml:

The process '/opt/hostedtoolcache/Ruby/3.1.3/x64/bin/bundle' failed with exit code 1

Any idea what's causing this?

[TylerRenfro]

Followed the tutorial for Github pages, but getting a build error from the GIthub Workflow on the jekyll build step

Conversion error: Jekyll::Converters::PostCss encountered an error while converting 'assets/css/main.css': 859: unexpected token

[TylerRenfro]

Figured it out with help from my developer friend. If anybody else experiences issues with DaisyUI on the Github Workflow it's because postcss doesn't work and you need to use postcss-v2 and make sure to install the postcss-cli

[AndrewMonty]

It may seem confusing that we are not selecting the GitHub Actions option in Source, but we don’t need to: as far as GitHub Pages is concerned we are telling it to deploy a normal branch that contains a pre-built static website. It doesn’t even know (or care) that the website was built with Jekyll, or that it was styled via Tailwind CSS.

Thank you! This was really tripping me up, it's very unclear in the documentation and other guides I've found.

[Orlovic982]

While implementing this I ran into a problem:Process completed with exit code 128 on GitHub Actions. Thnks to this article ( https://jonathansoma.com/everything/git/github-actions-403-error/) I just added 

permissions: contents: write

to script and it works. I hope this will help someone (not to lose two pressure days)!!!