Tailwindcss with Jekyll

12/08/2020
2 min read

Here is a simple demo to leverage the benefits of Tailwindcss in Jekyll.

I’ve been searching for a demo, and I found some examples, but it was often deprecated or not working at all.

I did my demo:

What is Tailwindcss

Tailwindcss is a CSS framework with a vast API surface. The idea is to abstract redundant CSS rules from developers, so you only have to set some configurations and use HTML classes to get a nice and clean UI.

Jekyll Demo

We use several resources in addition to Jekyll itself. The most critical files are postcss.config.js and tailwind.config.css. In this demo, it’s pretty basic but working.

I’ve also used the card hero component from tailwind components.

Hopefully, it will help you setup Tailwindcss with Jekyll. I’ve added all the necessary instructions in the README file, but if you have questions or something to add, do not hesitate to raise an issue and even make pull requests.

Is it perfect? Is it another Boostrap-like framework?

Not at all for the first question, and also no for the second.

I’ve included the sassc gem to improve builds, but it’s just a way to use Tailwindcss in Jekyll. There are other approaches.

Besides, even if Tailwindcss is promising, it’s not the perfect tool. Nothing is perfect. You have to use many classes and divs to get your UI, which is not necessarily ideal.

In that perspective, it’s similar to Boostrap, but it’s a pretty different approach, and it’s significantly lighter with the built-in purge CSS.

However, you won’t find the same amount of tutorials and freebies. Indeed, Tailwindcss is still young, and the documentation is fantastic, and this post on dev.to will give you A LOT of useful links.

What’s the point of Tailwindcss?

I still see Tailwindcss as a niche market, but that does not mean it’s not useful. It’s especially appropriate for those who do not want all the things but need good practices, easy layouts, and quick time to market.

IMHO, it’s an outstanding contribution to the web, and it might help a lot of people to build their app and deliver.

Photo by Travis Yewell on Unsplash

See Also