These fixes are now included in the jekyll-postcss library.
It’s been possible to use TailwindCSS in Jekyll via jekyll-postcss for a while, but it can be incredibly slow to generate, especially when working locally. In April 2021 TailwindCSS released a new JIT (just-in-time) engine that drastically speeds up generation. There are currently a couple of issues in
jekyll-postcss that prevents JIT mode from being enabled, but fortunately there are simple fixes we can implement.
Tailwind CSS v2.1 introduces a new just-in-time compiler for Tailwind CSS that generates your styles on-demand as you author your templates instead of generating everything in advance at initial build time.
No Such File or Directory
The first issue is the PostCSS generation fails to run at all due to the following error, first reported in the jekyll-postcss#22 issue:
In the issue ENT8R provides a comment explaining that TailwindCSS is expecting a value to be a file path but is receiving
stdin is not actually a path it throws an error.
You can fix it by creating an
stdin file in the root directory of the Jekyll project. It doesn’t need to contain anything, it just needs to exist. And don’t forget to exclude the file in the Jekyll configuration.
Forcing the CSS to Update
While everything is running now, if you add a completely new class to an HTML file you’ll notice it will have no effect. This is because
jekyll-postcss is caching the generated CSS based on the input. While your CSS hasn’t changed, the needed CSS has. And until PostCSS is triggered then JIT mode can’t determine a new CSS class is needed and add it to the generated CSS.
The quick fix here is to monkey patch
jekyll-postcss to pretend there’s always a cache miss, essentially disabling caching:
You can verify the fix by adding a TailwindCSS class that’s not used anywhere, perhaps an unused text color such as
text-indigo-50. If the color changes then you’re successfully using JIT mode in Jekyll!
Today I opened a pull request for
jekyll-postcss to fix the
stdin issue and add a
cache option to make it easier to disable the caching. Hopefully these quick fixes won’t be needed in the near future.
Thanks to Mitchell Hanberg for merging and releasing the fixes in less than 24 hours.