60 lines
2.0 KiB
Markdown
60 lines
2.0 KiB
Markdown
+++
|
|
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!
|