DEV Community

loading...

Adding Tailwind CSS to 11ty

iarehilton profile image Hilton Meyer Originally published at hiltonmeyer.com on ・2 min read

Layout #

In a previous post 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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

In file postcss.config.js:

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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',
    },
  };
};

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

Discussion (0)

pic
Editor guide