Series
Eleventy step by step
Building a site with Eleventy step by step: a first project, enriching templates with data, and integrating PostCSS and Tailwind CSS. So far only the last part is available in English; the earlier parts are in German.
3 min read DE
Eleventy: Integrate PostCSS and Tailwind CSS
In my Eleventy tutorial I showed how to set up a blog with Eleventy and how CSS gets into the pages. This goes one step further: Tailwind CSS in the same build.
The common approach runs the two side by side. The Tailwind CLI watches the stylesheet, Eleventy watches the templates, and package.json wires two scripts together with npm-run-all or concurrently. It works reliably, but it means two processes writing into the same output directory, and Eleventy knows nothing about the finished stylesheet.
Instead, I let Eleventy build the CSS itself. A hook generates the stylesheet before the first template renders and stores the resulting path as global data. One command, one process, and the layout knows the filename.