This post provides a quick walkthrough on how to use PostCSS plugins like Tailwind and Autoprefixer on your Jekyll site. I’ve included an example configuration below to get you started integrating Tailwind CSS into your Jekyll site.
Install Jekyll PostCSS plugin
The Jekyll PostCSS plugin integrates PostCSS into the Jekyll build process. To install, add
gem 'jekyll-postcss' to the Gemfile included with your Jekyll site.
Add this line to your site’s
bundle install to install the gem.
Install PostCSS and Tailwind
Use the following command to install Tailwind and PostCSS plugins.
I’ve also included the
@tailwindcss/typography plugin. This plugin adds a set of customizeable
.prose classes that set sensible typographic defaults – perfect for parsed Markdown content.
Create PostCSS configuration file
Create a PostCSS configuration file at the top-level of your project.
This configuration uses the postcss-import to enable build time processing of
@import statements. Be sure to review using with preprocessors if you are using additional plugins with Tailwind that are not listed above.
Create Tailwind configuration file
Create a Tailwind configuration file at the top-level of your project.
purge configuration option includes common Jekyll directories. When building for production, Tailwind uses this option to remove unused styles and optimize your CSS. Any files in your project that reference the Tailwind styles by name should be included in this array.
Include Tailwind in your CSS
Now you’re ready to include Tailwind in your CSS. As a reminder, your stylesheets will still need to have front matter in order for them to be processed by Jekyll.
When building for production, always set
NODE_ENV=production on the command line. When these variables are set to production, unused Tailwind styles are purged and the output is processed with cssnano.