Creating our base layout + setting up Tailwind

One of the cool things about moving to a framework like 11ty, is it’s dealer’s choice for which templating language you’re going to use. In our case, leaning on something sturdy like Nunjucks seems like the best choice.

We get access to utilizing partials (reusable code that we can import around our pages)
There are many primitives for handling things like your content failing to load
11ty has great support for passing variables around where your pages & partials will need them through it’s data cascade

Previously, we created an _includes folder. Inside of here we should create two new folders. One will be for our components (or macros), simply named components . Next is layouts , which is where we’re going to be focused in this lesson.

11ty exposes the _includes folders so that we have access to our layouts and components inside of our pages and inside of each other (for example using macros inside of other macros).

Let’s go ahead and create the HTML scaffold for our pages. Inside of /src/_includes/layouts/ we’ll create the base.njk file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/styles.css" />

  <title>{{ title }}</title>
</head>
<body class="w-screen h-screen bg-slate-400 flex flex-col text-gray-800 align-center justify-center">  
  <div class="flex flex-col w-screen h-screen">
    <main>
      {{ content | safe }}
    </main>
  </div>
</body>
</html>

Our layout will be what we can use to wrap all of our pages for the time being. You can create sub-layouts, or altogether new layouts depending on your needs for the page, but we should only need this one for now.

You’ll notice a few key things that we should probably talk about.

First, we’re going to need to make sure the output Tailwind styles are visible to our page AKA our link tag for /styles.css
Second, we’ve got this title variable seemingly coming from nowhere right? Well, because of 11ty’s data cascade, we’re able to pull variables in from our pages frontmatter. In our files, we’ll need to define a title to make sure our layout doesn’t break.
Last, we’re seeing some more new syntax (maybe) which is {{ content | safe }}. The content variable, being the page content itself. So, in our case, this will be our .njk page and components. the safe variable is a builtin filter to nunjucks, to make sure it will not be HTML escaped.

Now to make sure our Tailwind styles are working, we’ll need to fill in our tailwind config and import the components to our styles.css

// tailwind.config.js

module.exports = {
	content: [
		"./src/**/*.{njk,md,html}",
		"./src/_includes/**/*.njk"
	]
}

Once that’s setup, head to styles.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, let’s fill our index.njk page with some default content and frontmatter, so we can test that everything is working

---
title: Homepage
layout: layouts/base.njk
---

<h1>Welcome</h1>