Starter project for using Jekyll with Tailwind CSS
Clone or download
mhanberg Merge pull request #1 from scottwater/patch-1
Set production environment variable

This is necessary because PurgeCSS only runs in the prod env.
Latest commit 6760e5f Jan 15, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
_includes Initial Commit Nov 26, 2018
_layouts Initial Commit Nov 26, 2018
_posts Initial Commit Nov 26, 2018
bin Replace template gitignore during setup Nov 26, 2018
css Initial Commit Nov 26, 2018
.gitignore Replace template gitignore during setup Nov 26, 2018
404.html Initial Commit Nov 26, 2018
Gemfile Initial Commit Nov 26, 2018
README.md update readme for netlify.toml file Jan 15, 2019
_config.yml Initial Commit Nov 26, 2018
index.html Initial Commit Nov 26, 2018
netlify.toml Add netlify.toml file Jan 15, 2019
package.json Initial Commit Nov 26, 2018
postcss.config.js Initial Commit Nov 26, 2018
purgecss.config.js Initial Commit Nov 26, 2018

README.md

Jekyll Tailwind Starter

Welcome! Here you'll find a reasonable starter pack for using Jekyll with Tailwind CSS, Autoprefixer, and Purgecss.

About

This project uses jekyll-postcss to manage compiling your Tailwind and Autoprefixer styles. You can use any PostCSS plugin by installing it with yarn or npm and adding it to your postcss.config.js.

jekyll-purgecss is used to integrate Purgecss (only in production).

Install

git clone git@github.com:mhanberg/jekyll-tailwind-starter PROJECT_NAME

cd PROJECT_NAME

# Install your Ruby and JavaScript dependencies.
# Initialize your Tailwind configuration.
# Reinitialize your git repository.
bin/setup

Usage

# Install new dependencies
bin/bootstrap

# Start the server 
bin/start

# Create a new post
bin/new POST_TITLE

File Structure

+---_includes
    \---analytics.html // place your analytics tracking snippet in here
    \---components.css // Tailwind components CSS
    \---preflight.css // Tailwind preflight CSS
    \---syntax.css // Syntax highlighting CSS
    \---tailwind.js // Tailwind configuration. This is generated by bin/setup
+---_layouts
    \---default.html
    \---page.html
    \---post.html
+---_posts
+---_bin
    \---bootstrap // Install dependencies
    \---new // Create a new post and open it in your $EDITOR
    \---setup // Initial site setup
    \---start // Start the server with the livereload, incremental, drafts, and future flags on port 5000
+---_css
    \---site.css // Entry point stylesheet. You can write your styles here or import them from the _includes directory
+---index.md // Front page. This can be changed to an HTML file if desired.
+---404.html 
+---_config.yml // Jekyll configuration
+---postcss.config.js // PostCSS configuration. All plugins should be registered here.
+---purgecss.config.js // Purgecss configuration 
+---netlify.toml // Netlify configuration 

PostCSS plugins

  • Tailwind CSS
  • Autoprefixer
  • postcss-import

Deployment

This setup has been tested on Netlify. The JEKYLL_ENV environment variable must be set to production in order for PurgeCSS to execute. The included netlify.toml file will configure this on Netlify deploys