Zola + tailwindcss (Pretty theme. No hassle.)

Zola is powerful but comes naked.

You typically choose Zola as your static site generator (SSG) because you only want to write markdown and forget about everything your website is running on.

• No fight with Javascript bundlers and configurations.
• No fight with dependencies.
• No more fight with component customization.

This grown up boy just works out of the box, is lightweight and got everything built in!

It simply blows away the usual struggle associated with javascript SSG. And it's been yeaaars I didn't enjoy building a website this much.

But Zola comes without default styling! Which mean that by default it's uuugly!

So how do we add our favourite frontend tooling to it?

Tailwind makes styling easy

One of the best tools in my fancy-frontend bag is Tailwind 🤗. This CSS preprocessor is very handy when it comes to fast CSS styling.

It mainly provides:

• Predefined styles.
• Responsive design.
• Dark theme support.
• Readable code thanks to nested rules and class inheritance (@apply).

Here is a fraction of what tailwind can do for us. It clearly diminishes the boilerplate needed to bake a sexy website while keeping styles uniform and tidy.

/* css 🥹 */
:root {
  --radius-xs: 0.125rem;
}
.container {
  border-radius: var(--radius-xs);
}

/* tailwindcss 😎 */
.container {
  @apply rounded-lg;
}

This is an example for a single property, but just imagine how it strips out complexity for colours, shadows, borders definition and so on.

Add tailwind to a zola project

Less talking, more coding!

1. Install tailwind in your project root with your preferred Javascript package manager.

   bun add -D tailwindcss
   

2. Then, import tailwind at the top of your CSS file.

   /* template/css/main.css */
   @import "tailwindcss";
   

3. Load the processed stylesheet from your Html files.

   <!-- index.html -->
   <link
     rel="stylesheet"
     type="text/css"
     href="{{ get_url(path='css/main.css') | safe }}"
   />
   

To see the live result, simply run tailwind in watch mode and zola serve in parallel.

tailwindcss \
    -i templates/css/main.css \
    -o static/css/main.css \
    --watch
& zola serve --drafts \
&& fg

Congrats!

You now have the keys to build pretty static sites with your favourite CSS tooling. 🥳

Get the most out of tailwind

Organize your code (split it)

You want to split your code into multiple files to keep things tidy. So abuse the import statement.

/* template/css/main.css */
@import "taiwindcss";
@import "./syntax_highlighting.css";

Tailwind will still deliver a single bundled file, so no need to add more link element to your index.html.

Write less (use plugins)

You certainly want to have more default styling like buttons, dropdown, navbar...

Guess what, you can import libraries in a breeze. One of the cutest is certainly daisyui.

Once again, install with your javascript package manager.

bun add -D daisyui

And import at the top of your file.

/* template/css/main.css */
@import "taiwindcss";
@plugin "daisyui";

What's next?

If tailwind isn't enough, and you still want to lower the amount of code you write. Go check Pug syntax and replace your old Html with it.