A bare bones Jekyll site which comes preconfigured to use Tailwind CSS for styling.
- 🤍 Ships free of styling or theming. Add a theme or get started with Tailwind CSS.
- 📈 Ships Google Analytics and SEO ready
- 🍕 Dev mode: your Jekyll site is refreshed on file changes and all Tailwind CSS classes are available for use.
- 💻 Release mode: CSS is optimised by striping out unused classes and minifying the file.
Ensure Ruby and npm are installed then setup the project:
npm run setup
npm start
Open your page on localhost:4000. Parcel and Jekyll will run concurrently so file changes update automatically.
⚠️ CSS might not render on the very first load.⚠️ Simply open
index.css
, save the file to trigger an update, then refresh your browser.Jekyll and Parcel run concurrently in dev builds so the CSS may not generate in time. This only happens once (when the file doesn't exist) and is not an issue in prod builds.
npm run build
Tailwind CSS is minified and Jekyll outputs the site to the _site
folder.
Deploy statically (e.g. Netlify) with the following build settings:
- Command:
npm run build
- Directory:
_site
- Jekyll markdown may generate elements that are being purged by Tailwind CSS. See these docs to whitelist elements or configure PurgeCSS further.
- Don't build up class names like
"my" + "-class"
. Use full names like"my-class"
instead. - Don't whitelist the
_site/
folder as this folder is not guaranteed to exist when deployed to a server.
Contact me by posting an issue. I'll be happy to help 🙂