jekyll-tailwindcss-boilerplate
Jekyll & Tailwind CSS Boilerplate
A bare bones Jekyll site which comes preconfigured to use Tailwind CSS for styling.
š Try the demo here š
Features
- š¤ Ships free of styling or theming. You can:
- Add a theme
- Get started with Tailwind CSS
- Use the Tailwind Typography plugin (see example)
- š 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.
š Install
Ensure Ruby and node (v12.13+) are installed then setup the project:
npm run setup
Configure Jekyll via _config.yml:
- Add your site title and description
- Add your google anlaytics ID
- Add seo config via jekyll-seo-tag docs
š Develop
npm start
Open your page on localhost:4000. Parcel and Jekyll will run concurrently so file changes update automatically.
:warning: CSS might not render on the very first load. :warning:
Simply open
styles/index.cssin your local text editor, save the file to trigger an update, wait until Parcel/Jekyll 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.
š» Release
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
Packages
Here are the docs for packages used in this boilerplate:
- Jekyll - The static site generator
- Jekyll seo - Adds seo tags to your pages
- Parcel - The bundler that builds Tailwind
- Tailwind CSS - Provides utility classes to style pages instead of CSS
- Tailwind typography plugin - Makes Tailwind work nicely with markdown
š¤ FAQ
What is the tailwindcss-typography plugin and do I need it?
- By default Tailwind normalises styles so headings, paragraphs, etc. look the same
- But Jekyll is often used for blogs and other text heavy site where you often want default text styles
- The typography plugin solves this and brings nice default styles to markdown generated content
- It's completely optional and easy to activate for specific content via the
proseclasses - Note that it adds ~20kB to your final CSS file in prod. This isn't huge but is good to remove if you don't need it
- To remove it simply delete it from the
pluginssection in yourtailwind.config.jsfile
Why are CSS file changes slow to update?
- When you update the
index.cssfile all Tailwind classes have to regenerate (via Parcel) which can take up to ~10 secs - In practise this isn't a common problem as most people don't update the file that often
- If you are writing custom CSS then you can add non-Tailwind CSS files and add refer to them in the
head.htmlfile directly which skips the Parcel build process
Styles don't load when I build then open index.html locally
- CSS may not load if you open the
_site/index.htmlfile directly in you local browser - To see the final site run
jekyll serveand open the local server url (localhost:4000) - This should not be a problem when deployed to a server
Some of my styles disappear when deployed
- 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
Have another issue?
Contact me by posting an issue. I'll be happy to help š