Adding Tailwind CSS to 11ty
Tags: eleventy, 11ty, tailwindcss
Published: 2020-05-18 06:14:57

---
title: Adding Tailwind CSS to 11ty
published: true
date: 2020-05-17 00:00:00 UTC
tags: eleventy, 11ty, tailwindcss, tailwind
canonical_url: https://hiltonmeyer.com/articles/add-tailwind-11ty.html
---

## Layout [#](#layout)

In a [previous post](https://hiltonmeyer.com/articles/basic-11ty-setup.html) I setup the skeleton of a 11ty project. This is my basic setup that I use to get this up and running quickly. I would say that within about 1 hour you can have a site live and ready to start adding content. Most of my time though is normally spent messing around with layout. Getting this setup in just the right way and I am no UI specialist so my sites don't come across as flash, very much the opposite. But this is more about adding Tailwind than harping on about my lack of design skills.

```
npm install -D tailwindcss postcss autoprefixer

```

As I use the `src` directory for all my development I place my assets folder in there and create my css.

```
mkdir -p src/assets/css
touch src/assets/css/tailwind.pcss

```

For tailwind you need to create a basic css file and during the build it converts this into the final css. This file is also used for the global changes that you can make. In `src/assets/css/tailwind.pcss` add the following:

```
@tailwind base;

@tailwind components;

@tailwind utilities;

```

Tailwind also has a config file which can be created using the `init` command. To enable building the eventual css I post css can be used which is how I set it up. Parcel also picks this up automatically.

```
npx tailwindcss init
touch postcss.config.js

```

In file `postcss.config.js`:

```
module.exports = {
  plugins: [require('tailwindcss'), require('autoprefixer')],
};

```

## Build [#](#build)

Parcel is my build tool of choice. Lik e11ty there's no complex setup required and you can be up and running quickly. I like that it has some pre-configured things like postcss that helps me use it to build tailwind.

```
npm install -D parcel cross-env npm-run-all rimraf

```

I make a few changes to eleventy config just to so I use the default setup of parcel that builds into the dist directory. My setup for `.eleventy.js`:

```
module.exports = function (eleventyConfig) {
  return {
    passthroughFileCopy: true,
    dir: {
      input: 'src',
      includes: '_includes',
      data: '_data',
      output: 'dist',
    },
  };
};

```

Need to add the css to the layout previously created `src/_includes/layouts/base.njk`:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>
      {{ renderData.title or title or metadata.title}}
    </title>
    <meta
      name="Description"
      content=""
    />
    <link rel="stylesheet" href="/assets/tailwind.css" />
  </head>

  <body>
    <header>
      <h1>{{ metadata.title }}</h1>
      <div>
        {%- for nav in collections.nav -%}
        <a href="{{ nav.url | url }}"
          >{{ nav.data.navtitle }}</a
        ><br />
        {%- endfor -%}
      </div>
    </header>
    <main>
      {{ content | safe }}
    </main>
  </body>
</html>

```