I've been trying out Jekyll for a new side project's static website and of course added my favorite CSS framework, Tailwind, into the mix. However, after adding Tailwind with PostCSS I began to see very slow build times. Generating the site went from less than a second to more than 30 seconds. Waiting this long to see every change you do makes working with Jekyll impossible.
The problem arises because Jekyll regenerates all of the SCSS for every change, even if you use the --incremental
flag and don't touch your SCSS. The Tailwind files include a lot of CSS classes, and therefore this takes forever (at least on my 2016 MacBook).
There are different ways to avoid this and build your own fancy asset pipeline, but I wanted to stick to a simple asset pipeline with PostCSS.
The idea is to take advantage of some neat config options in Jekyll and of the fact that you usually don't change your Tailwind CSS. We'll make Jekyll generate the site with Tailwind once in the beginning of our project, and after that tell Jekyll to not bother with the Tailwind CSS files.
First, add Tailwind with PostCSS to your project (you can follow this or this tutorial).
Second, in your _config.yml
file, add the following to your exclude
and keep_files
settings.
exclude:
# other stuff you're excluding
- assets/css/tailwind.scss
keep_files:
# other stuff you're keeping
- assets/css/tailwind.css
- assets/css/tailwind.css.map
We're telling Jekyll to ignore tailwind.scss
and to not delete tailwind.css
and tailwind.css.map
when building the site. Why not delete the files if we ignored them in the first place? You'll see. Make sure that you only @import
the Tailwind stuff in tailwind.scss
and keep the rest of your CSS in other files. My tailwind.scss
looks like this:
---
---
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Third, we add a second config file called _config_tailwind.yml
that looks like this:
include:
- assets/css/tailwind.scss
That's it.
The magic happens here: Whenever you want Jekyll to build Tailwind, you need to tell it to include both config files. You definitely need to do this once at the start of the project, and then everytime you change something in Tailwind. To build with both configs, run this command:
jekyll build --config _config.yml,_config_tailwind.yml
After that, you can just build or serve Jekyll normally with:
jekyll serve --incremental
The keep_files
option is necessary, because otherwise Jekyll will delete our taiwind.scss
file from the generated site.
Bonus: To make your live easier, add the initial build command to your package.json
file:
"scripts": {
"build-tailwind": "jekyll build --config _config.yml,_config_tailwind.yml"
}
Now, you can just go yarn run build-tailwind
.
A word of caution: Once you add PostCSS to handle your asset pipeline, Jekyll's standard way of importing SASS partials from the _sass/
folder stops working. Instead, you need to import with the full path, like so:
# assets/css/main.scss
@import '/_sass/header.scss'
# this default Jekyll way will fail
@import 'header'
Top comments (0)