A Quick Overview off 11ty
11ty (pronounced "Eleventy") is a simple, fast, and flexible static site generator that helps you build modern websites with minimal fuss. With 11ty, you can write your content using a variety of formats like HTML, Markdown, and Nunjucks, and it seamlessly compiles them into static pages.
Its simplicity lies in its configuration-free setup, allowing developers to focus on writing content and designing layouts. 11ty works well with many templating languages and includes features like incremental builds, content collections, and automatic template rendering, making it a powerful tool for building fast, maintainable, and scalable static websites.
Whether you're building blogs, portfolios, or even documentation sites, 11ty offers a lightweight and extensible solution to create static websites with speed and efficiency.
What is Tailwind CSS?
It is a well-known fact that Tailwind CSS is a utility-first CSS framework. It lets you style elements directly within your HTML, thanks to pre-defined classes. Unlike other CSS frameworks that offer pre-built components, Tailwind offers these low-level utility classes that let you create your own design system. Thus, this makes crafting unique responsive designs effortless as there is not much to do with custom CSS.
Why You Should Choose TailwindCSS with 11ty for Your Projects
The pairing of 11ty and Tailwind CSS provides an efficient and streamlined approach to building powerful, feature-rich websites. Here's why:
- Rapid Development: TailwindCSS's utility-first approach allows you to style your website quickly without writing custom CSS for each element, while 11ty compiles static sites fast, ensuring a smooth development process.
- Performance-Optimized: Static sites generated by 11ty are inherently fast, and when styled with TailwindCSS, you get a lightweight, high-performance website that loads in no time.
- Easy Customization: TailwindCSS provides a flexible and customizable framework that lets you design exactly how you want, while 11ty’s templating system gives you complete control over your site's structure.
How to Initialize a 11ty Project?
Set up a New Node Project : Initialize your project with npm, and add the necessary development and build scripts.
npm init -y
npm pkg set scripts.dev="eleventy --serve"
npm pkg set scripts.build="eleventy"
Install 11ty : Use npm to install 11ty for static site generation.
npm install @11ty/eleventy
Create a layout template: Define your layout by creating a file at
src/_includes/layouts/default.njk
---
title: "My Blog"
---
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
<link rel="stylesheet" href="/styles/index.css">
</head>
<body>
{{ content | safe }}
</body>
</html>
Create a homepage : Set up a homepage by creating file at
src/index.njk
---
layout: layouts/default.njk
---
<!-- Content Here -->
Step-by-Step Guide to Setting Up TailwindCSS v4 with 11ty
Install Tailwind CSS and Dependencies : Install PostCSS and Tailwind CSS using npm.
npm install postcss tailwindcss@latest @tailwindcss/postcss@latest
Update or Create the CSS File: If you don’t have an existing CSS file, create one at
src/styles/index.cssand configure it to include TailwindCSS.
@import 'tailwindcss';
Create
eleventy.config.mjs: Create theeleventy.config.mjsfile in the root directory to configure TailwindCSS output.
import fs from 'fs';
import path from 'path';
import postcss from 'postcss';
import tailwindcss from '@tailwindcss/postcss';
export default function (eleventyConfig) {
eleventyConfig.on('eleventy.before', async () => {
const tailwindInputPath = path.resolve('./src/styles/index.css');
const tailwindOutputPath = './dist/styles/index.css';
const cssContent = fs.readFileSync(tailwindInputPath, 'utf8');
const outputDir = path.dirname(tailwindOutputPath);
if (!fs.existsSync(outputDir)) {
fs.mkdirSync(outputDir, { recursive: true });
}
const result = await postcss([tailwindcss()]).process(cssContent, {
from: tailwindInputPath,
to: tailwindOutputPath,
});
fs.writeFileSync(tailwindOutputPath, result.css);
});
return {
dir: { input: 'src', output: 'dist' },
};
}
Run the project: Use the command to compile Tailwind CSS and launch the project.
npm run dev
Creating a Profile Card Using TailwindCSS Utilities
Create a
ProfileCard.njkFile : Create a new file calledProfileCard.njkinside thesrcdirectory .
---
layout: layouts/default.njk
permalink: /profile/
---
<div class="flex flex-col items-center justify-center max-w-md p-6 bg-white rounded-lg shadow-md gap-4 text-center">
<img src="<https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png>" alt="user" width="50" height="50" class="rounded-full"/>
<div class="flex flex-col items-center">
<h2 class="text-xl font-semibold">John Doe</h2>
<p class="text-gray-500">Software Engineer</p>
</div>
<p class="text-gray-500">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum animi beatae molestiae quasi fugiat ut.
</p>
<button class="bg-purple-400 text-white px-6 py-3 rounded-full hover:bg-purple-500 transition duration-300 active:scale-95">
View Profile
</button>
</div>
Run the Command and Preview : Execute the command and view your profile card by navigating to
localhost:8080/profile.
npm run dev
Creating a Profile Card with TailwindCSS and FlyonUI
Here, we’ll use FlyonUI, an open-source Tailwind CSS Component library. It offers a wide range of customizable, accessible, and ready-to-use components.
Let’s integrate 11ty with FlyonUI components and create a profile Card.
Install FlyonUI : Install FlyonUI using npm to include its components and utilities
npm install flyonui@latest
Add FlyonUI plugin : Include the FlyonUI plugin by adding it to your
style.cssfile.
@import 'tailwindcss';
@plugin "flyonui";.
@import "flyonui/variants.css";
@source "./node_modules/flyonui/flyonui.js"; // Add only if node_modules is gitignored
Update
eleventy.config.mjsto Copy FlyonUI JS: Modify theeleventy.config.mjsfile to ensure the FlyonUI JavaScript is copied during build.
export default function (eleventyConfig) {
// Copy flyonUI JS
eleventyConfig.addPassthroughCopy({
"node_modules/flyonui/flyonui.js": "vendor/flyonui/flyonui.js",
});
...
}
Include FlyonUI JavaScript in the Layout: Integrate the FlyonUI JavaScript into the
src/_includes/layouts/default.njkfile for JavaScript components.
---
title: My Blog
---
<!doctype html>
<html lang="en">
<head>
...
<link rel="stylesheet" href="/styles/index.css">
</head>
<body>
{{ content | safe }}
// FlyonUI Javascipt
<script src="/vendor/flyonui/flyonui.js"></script>
</body>
</html>
Refactor the Profile Card with FlyonUI Components: Enhance your profile card by incorporating FlyonUI's ready-made components like Avatar, Card, Buttons, and more.
<div class="card">
<div class="card-body items-center text-center">
<img src="<https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png>" alt="user" width="50" height="50" class="rounded-full" />
<h5 class="card-title">John Doe</h5>
<h5 class="card-subtitle mb-2">Software Engineer</h5>
<p class="mb-4">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum animi beatae molestiae quasi fugiat ut.
</p>
<div class="card-actions">
<button class="btn btn-primary btn-gradient rounded-full">View Profile</button>
</div>
</div>
</div>
This is how your Profile Card will appear:
Conclusion
Combining 11ty with Tailwind CSS delivers a fast, efficient, and flexible way to build high-performance websites. This powerful duo streamlines development, enhances design consistency, and ensures a responsive, modern user experience. Perfect for any project, 11ty and Tailwind make web development faster and more enjoyable.
Here's the repository where you can find more details or see the complete code: 11ty-tailwindcss-setup. I hope this tutorial helps you with the 11ty integration with Tailwind CSS.
Happy Coding 🙌🏻