DEV Community

Cover image for Tailwindcss with Jekyll
Julien Maury
Julien Maury

Posted on • Originally published at blog.julien-maury.dev

Tailwindcss with Jekyll

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:

GitHub logo jmau111 / jekyll-tailwindcss

a simple demo of Tailwindcss in Jekyll

Tailwindcss for Jekyll

release release date release feed

Here is a simple demo of Tailwindcss 3++ in Jekyll with sass

See the live demo

How to use it

  1. clone the repository
  2. cd jekyll-tailwindcss
  3. bundle to install jekyll dependencies
  4. yarn to install node modules
  5. bundle exec jekyll serve to run a local server

Enjoy!

Source: documentation Tailwindcss

Here is the final build command:

JEKYLL_ENV=production jekyll build

If it does not work, try:

JEKYLL_ENV=production bundle exec jekyll build

Alternatively, you can use yarn dev and yarn build.

Demo URL

See the live demo

Styles are from https://tailwindcomponents.com/component/card-hero-section




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 Bootstrap-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 Bootstrap, 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

Discussion (1)

Collapse
jampinet profile image
Giampiero

Thank you, this is the first time I managed to setup a Jekyll website with Tailwind.
I've looked for a couple of months for a solution like this one.
I had a little compatibility troublethooting to solve (bundler version problems, and other stuff I usually solve with internet searches and lots of prayer, but not this time), but in the end... It worked!
Thank you so much!