Jekyll Tailwind Starter screenshot

Jekyll Tailwind Starter

Author Avatar Theme by Mhanberg
Updated: 22 Nov 2021
116 Stars

Starter project for using Jekyll with Tailwind CSS

Overview:

The Jekyll Tailwind Starter is a starter pack that provides a convenient setup for using Jekyll with Tailwind CSS, Autoprefixer, and Purgecss. It offers an efficient way to compile and manage your styles using PostCSS plugins.

Features:

  • Jekyll with Tailwind CSS: Combines the power of Jekyll, a popular static site generator, with the utility-first CSS framework, Tailwind CSS.
  • Autoprefixer: Automatically adds vendor prefixes to your CSS, ensuring cross-browser compatibility.
  • Purgecss: Removes unused CSS, resulting in a smaller file size and better performance.
  • PostCSS plugins: Supports the integration of other PostCSS plugins by easily installing and adding them to your postcss.config.js file.
  • Deployment on Netlify: Tested and compatible with Netlify, a popular platform for hosting and deploying static websites.

Installation:

To install the Jekyll Tailwind Starter, follow these steps:

  1. Install dependencies using either yarn or npm:
yarn install
# or
npm install
  1. Configure your postcss.config.js file to include the desired PostCSS plugins:
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
    require('@fullhuman/postcss-purgecss'),
    require('cssnano')
  ]
}
  1. Build your site using Jekyll:
bundle exec jekyll build
  1. Deploy your site using Netlify or your preferred hosting platform.

Summary:

The Jekyll Tailwind Starter is a convenient and efficient solution for using Jekyll with Tailwind CSS. With its integration of Autoprefixer and Purgecss, it provides improved performance and compatibility. The support for other PostCSS plugins allows for easy customization and further enhancement of the development workflow. It has been tested on Netlify, making it a reliable option for deployment.