• See the wiki for instructions
• See https://afomi.github.io/jekyll-with-tailwind/ for the results

Tailwind 4.x uses the tailwindcss/cli to build assets. npm run build:css generates assets/css/main.css, based on the Tailwind classes that are used in the project.

npm run build:css
bundle exec jekyll serve --livereload

Terminal 1 - Watch and rebuild CSS on changes:

npx @tailwindcss/cli -i ./assets/css/tailwind.css -o ./assets/css/main.css --watch

Terminal 2 - Serve Jekyll with live reload:

bundle exec jekyll serve --livereload

This setup watches for changes to your CSS and HTML files, rebuilds the CSS, and auto-refreshes the browser.