A starter kit for using Tailwind with Jekyll that includes:
- A barebones Jekyll starter theme
- A Gulpfile that does the following:
- Compiles Tailwind
- Runs Autoprefixer
- Minifies your CSS
- Compiles Jekyll
- Runs Browsersync for local development
"Tailwind is a utility-first CSS framework for rapidly building custom user interfaces." โTailwind
"Jekyll is a simple, blog-aware, static site generator perfect for personal, project, or organization sites. Think of it like a file-based CMS, without all the complexity. Jekyll takes your content, renders Markdown and Liquid templates, and spits out a complete, static website ready to be served by Apache, Nginx or another web server." โJekyll
bundle install
to install Ruby gemsnpm ci
to install npm packages listed inpackage-lock.json
npm run start
ornpm run dev
to compile the site with development settings and run BrowserSync
npm run build:dev
to compile the site with development settingsnpm run build:production
ornpm run build
to compile the site for production
This site is currently hosted on Google's Firebase Hosting.
https://firebase.google.com/docs/hosting/deploying
$> firebase serve --only hosting
After you've tested the changes locally. To deploy:
$> firebase deploy --only hosting
Firebase Spark hosting caches the CSS file for 3600 seconds or 60 minutes. I've tried setting the Cache-Control header to no-cache. That doesn't work. The caching happens at the edge. I also tried appending a time stamp at build time to the style.css file but that didn't bust the cache either. Instead it's necessary to change the name of the css file in three places: rename the file to stylev{versionNumber}.css, then change the gulp file and the head.html include to reflect the new file name. This appears to be the only way to bust the cache.
Enjoying Jekyll Starter Tailwind and want to help? You can:
- Create an issue with some constructive criticism
- Submit a pull request with some improvements to the project