Dean

Tailwind CSS v2 with Jekyll

I’ve recently been playing around with the new version of Tailwind CSS and I wanted to update this site design to use it. Here’s a quick tutorial on setting it up with Jekyll.

1. Install Tailwind with Yarn

yarn add tailwindcss autoprefixer

2. Add Tailwind to your CSS

Add the following to assets/css/main.scss.

Note that the --- lines need to stay there or you’ll run into an issue where PostCSS won’t build the CSS file.

---
---
@tailwind base;

@tailwind components;

@tailwind utilities;

3. Create Tailwind config file

Run npx tailwindcss init to create tailwind.config.js file.

4. Setup PostCSS with Tailwind

Add jekyll-postcss to your Gemfile and run bundle install

group :jekyll_plugins do
  gem "jekyll-postcss"
end

Then add jekyll-postcss to your plugins in _config.yml:

plugins:
  - jekyll-postcss

Now create a postcss.config.js file in the root directory to add tailwind and autoprefixer:

module.exports = {
  plugins: [
    require('tailwindcss')('./tailwind.config.js'),
    require('autoprefixer'),
  ]
}

5. Remove unused CSS

The great thing about Tailwind is that it uses PostCSS to remove any unused CSS which reduces the size of the final CSS file. Edit your tailwind.config.js file so it looks like this:

module.exports = {
	purge: [
		'./_site/**/*.html',
		'./_site/*.html'
	],
	theme: {
		extend: {},
	},
	variants: {},
	plugins: [],
}

Now when you build/deploy your site, you’ll need to use the JEKYLL_ENV environment variable. For example:

JEKYLL_ENV=production bundle exec jekyll build

Success! You should now have a working Jekyll site with Tailwind!

Copyright 2011-2021 Dean (deanpcmad)

Buy me a Coffee