+++
title = "Getting Started with Zola and Tailwind CSS"
date = 2025-03-18
description = "Learn how to set up a static site using Zola and Tailwind CSS"
+++

# Getting Started with Zola and Tailwind CSS

Zola is a fast static site generator written in Rust, and Tailwind CSS is a utility-first CSS framework. Together, they make a powerful combination for building modern websites.

## Why Zola?

Zola offers several advantages:

- **Speed**: Built in Rust, Zola is incredibly fast
- **Simplicity**: Everything is included out of the box
- **Flexibility**: Customize your site with Tera templates
- **Live Reload**: See changes instantly during development

## Why Tailwind CSS?

Tailwind CSS provides:

- **Utility-First**: Build custom designs without leaving your HTML
- **Responsive**: Easily create responsive designs with responsive utility variants
- **Component-Friendly**: Extract reusable components with @apply
- **Customizable**: Tailor the framework to your design needs

## Code Example

Here's a simple example of a Zola template using Tailwind CSS:

```html
<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:w-48" src="/img/example.jpg" alt="Example image">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Finding the perfect balance</a>
      <p class="mt-2 text-gray-500">Getting the right mix of technology for your project can be challenging.</p>
    </div>
  </div>
</div>
```

## Getting Started

To create your own Zola site with Tailwind CSS:

1. Install Zola and Node.js
2. Create a new Zola site: `zola init my-site`
3. Set up Tailwind CSS: `npm init -y && npm install -D tailwindcss postcss autoprefixer`
4. Initialize Tailwind: `npx tailwindcss init -p`
5. Configure your templates and styles
6. Build and deploy your site

Happy coding!