DEV Community

loading...
Cover image for Tailwindcss with Jekyll

Tailwindcss with Jekyll

jmau111 profile image Julien Maury Originally published at blog.julien-maury.dev ・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:

GitHub logo jmau111 / jekyll-tailwindcss

a simple demo of Tailwindcss in Jekyll

Tailwindcss for Jekyll

Here is a simple demo of Tailwindcss in Jekyll with sass

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!

Purge

Note that I don't use the built-in purge CSS of Tailwind. Instead, I use a Jekyll plugin to purge unused CSS.

It's vital to understand how Tailwind purges CSS to avoid mistakes:

It doesn't try to parse your HTML and look for class attributes or dynamically execute your JavaScript — it simply looks for any strings in the entire file that match a regular expression

Please read the documenation. For example, the following won't work:

<div class="text-{{  error  ?  'red'  :  'green'  }}-600"></div>
Enter fullscreen mode Exit fullscreen mode

Instead always write the full class name, eg:

<div class="{{  error  ?
Enter fullscreen mode Exit fullscreen mode

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 (2)

pic
Editor guide
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!

Collapse
jmau111 profile image
Julien Maury Author

Awesome. That's exactly why I made that repo.