Skip to content

Starter project for using Jekyll with Tailwind CSS (Updated for V3)

Notifications You must be signed in to change notification settings

namzo/jekyll-tailwind-starter

 
 

Repository files navigation

Jekyll Tailwind Starter

Originally created by mhanberg, this starter pack is for using Jekyll with Tailwind CSS v3, Autoprefixer.

This fork does not make use of PurgeCSS, but uses Tailwind's default instead, and it is updated to support Tailwind v3.0.

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.

Install

git clone git@github.com:namzo/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
    \---syntax.css // Syntax highlighting CSS
    \---tailwind.config.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.
+---netlify.toml // Netlify configuration 

PostCSS plugins

  • postcss-import
  • Tailwind CSS
  • Autoprefixer
  • cssnano

Configure your Tailwind and Just-in-time

Sample tailwind.config.js

module.exports = {
  content: [
    './_includes/**/*.html',
    './_layouts/**/*.html',
    './_posts/*.{html,md}',
    './*.html'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Deployment

This setup has been tested on Netlify.

About

Starter project for using Jekyll with Tailwind CSS (Updated for V3)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • CSS 48.5%
  • Ruby 19.9%
  • Shell 13.7%
  • HTML 12.4%
  • JavaScript 5.5%