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.
Webmentions
No Comments Yet