2.0 KiB
2.0 KiB
+++ 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:
<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:
- Install Zola and Node.js
- Create a new Zola site:
zola init my-site - Set up Tailwind CSS:
npm init -y && npm install -D tailwindcss postcss autoprefixer - Initialize Tailwind:
npx tailwindcss init -p - Configure your templates and styles
- Build and deploy your site
Happy coding!