11ty logo

At first I was using npm-run-all with scripts to run tailwindcss & 11ty as that seemed to be the standard for most eleventy sites using tailwindcss.
This caused some issues in dev mode as I was using a inline css bundle which referenced the output of tailwindcss.

Integrating Tailwindcss & Postcss #

I found it is possible to integrate postcss with eleventy using a filter with nunjucks.

This fixes a lot of issues & means scripts in package.json are cleaner.

Eleventy: PostCSS und Tailwind CSS integrieren

Slight modification of above & you can have postcss & tailwindcss integrated with eleventy.

Eleventy Config #

const postcss = require('postcss')
const tailwindcss = require('tailwindcss')
const autoprefixer = require('autoprefixer')
  // PostCSS filter for tailwindcss
  eleventyConfig.addNunjucksAsyncFilter('postcss', (cssCode, done) => {
    postcss([tailwindcss(), autoprefixer()])
      .process(cssCode, { from: undefined })
      .then(
        (r) => done(null, r.css),
        (e) => done(e, null)
      )
  })
  // Watch for css changes.
  eleventyConfig.addWatchTarget('src/_styles/*.css')

Referencing CSS #

In head of base.njk

{# Use PostCSS filter to provide inlined css #}
{% set css %}
{% include "src/_styles/_global.css" %}
{% endset %}
<style>{{css | postcss | safe}}</style>

Adding Plugins #

It's possible to extend this with more postcss plugins.

I added cssnano with the default preset but this seems to slow things down a lot so I removed it.

build without cssnano #

[11ty] Benchmark    858ms  35%    22× (Configuration) "postcss" Nunjucks Async Filter
[11ty] Copied 13 files / Wrote 25 files in 2.19 seconds (87.6ms each, v2.0.1)

build with cssnano #

[11ty] Benchmark   1231ms  17%    22× (Configuration) "postcss" Nunjucks Async Filter
[11ty] Copied 13 files / Wrote 25 files in 6.75 seconds (270.0ms each, v2.0.1)

Source Code #

The source for my 11ty blog is available on github.

11ty-equk