11ty and tailwindcss template, Part II

Part I : code - Setting up the scaffolding
Part II : code - Enabling TailwindCSS

Enable tailwindcss #

Time to get tailwindcss added and compiling into our project.

Install the tailwindcss and enabling packages:

  $ npm install tailwindcss postcss-cli

Building the layout #

First, create a base style.css:


  @tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
h2 {
@apply text-green-500;

Setup tailwind.config.js:

  module.exports = {
purge: {
content: [
options: {
whitelist: [],
theme: {},
variants: {},
plugins: [],

Setup postcss.config.js to require tailwindcss as a plugin:

  module.exports = {
plugins: [

Next, update package.json with the build:css needed to build the css:

"name": "11ty-tailwind-base",
"scripts": {
"start": "npm run serve",
"build:css": "postcss src/site/_includes/css/style.css -o ./.build/css/style.css",
"author": "",

Running npm run build:css will output to ./.build/css/style.css.

Add the css build into the site output #

Now that we have our tailwindcss building, we need to add it into the rest of the build process. We will need a few new tools to help make it go smoother.

  • npm-run-all - will allow for running npm commands in parallel or concurrently

npm-run-all setup #

Install npm-run-all:

  $ npm install npm-run-all

Update package.json to use it:

  "scripts": {
"start": "npm run serve",
"serve": "run-p \"build:html -- --serve\" \"build:css -- --watch\"",
"build": "npm-run-all build:css build:html",
"build:css": "postcss src/site/_includes/css/style.css -o ./.build/css/style.css",
"build:html": "eleventy",
"test": "echo \"Error: no test specified\" && exit 1"
  • build:html simply builds eleventy with no flags.
  • build runs build:css and build:html in sequential order. Similiar to npm run build:css && npm run build:html.
  • serve has been updated to use run-p which is shorthand for npm-run-all --parallel. Serve uses existing npm commands and adds additional flags to set them in watch mode.

Configure .eleventy.js to passthrough the css #

// Watch for CSS changes
// Copy CSS build changes to dist css/style.css
eleventyConfig.addPassthroughCopy({ "./.build/css/style.css": "css/style.css" });

Clean-up the css output #

Install more tooling:

  $ npm install autoprefixer @fullhuman/postcss-purgecss cssnano
  • autoprefixer - don't bother with writing the vender prefixes and instead let the autoprefixer do it for you.
  • postcss-purgecss - in order to keep the output css small we have the prugecss tool to only include css that is used.
  • cssnano - makes the css output nice and small.

Add in the autoprefixer #


  module.exports = {
plugins: [

Enable the purge with postcss-purgecss plugin #

Enable PurgeCSS and cssnano on the dist folder.


  const purgecss = require('@fullhuman/postcss-purgecss')

module.exports = {
plugins: [
content: ['./**/*.html']
preset: 'default',

Update .gitignore #



Finally run it #

Now our output css file is much smaller!

Run npm start and watch the output.

Follow along with the source code: 11ty-tailwind-base - Part II

Since you've made it this far, sharing this article on your favorite social media network would be highly appreciated 💖! For feedback, please ping me on Twitter.