11ty/Eleventy-Nunjucks-Tailwind-PostCSS Starter

· By Mark Edwards

Are you looking for a simple, production-ready static site starter that just works? One that skips the boilerplate but still includes the modern tooling you actually care about? I recently ran into this exact need while building small sites and prototypes, and now I’m sharing the result with you.

Math Wiz
Screenshot of the Home Page

Introducing a Minimal 11ty Static Site Starter with Nunjucks, PostCSS, and Tailwind CSS

Here's an 11ty/Eleventy Static Site Starter: A clean, fast, and extensible Eleventy starter template powered by Nunjucks, Tailwind CSS, and PostCSS.

While Eleventy is incredibly flexible, getting the right setup with Tailwind CSS, PostCSS, Autoprefixer, and templating support (like Nunjucks) can be a little confusing, especially for beginners or for people who don’t want to spend time wiring up their stack every time they start a new project.

This starter includes:

  • A basic but powerful layout system using Nunjucks
  • Tailwind CSS with a working config file (fully extensible)
  • A PostCSS pipeline including Autoprefixer
  • A simple file structure you can scale up or down
  • Hot reload during development

No extra fluff, just what's needed to hit the ground running.

Features

What's included:

  • Eleventy - Fast, flexible static site generator
  • Nunjucks - Powerful templating engine with inheritance
  • Tailwind CSS - Utility-first CSS framework with sensible defaults
  • PostCSS - CSS processing with Autoprefixer
  • Hot reload - Development server with automatic rebuilds
  • Responsive design - Mobile-first approach with Tailwind utilities
  • Zero configuration - Works out of the box, customize when needed

Getting Started

To clone and run the project locally:

Requirements

  • Node.js 18 or higher
  • npm or yarn

Setup

git clone https://github.com/MarkEdwardsMBA1/11ty_Static_Site_Starter.git
cd 11ty_Static_Site_Starter
npm install
npm run dev

Now visit http://localhost:8082 and you’re live!

Project Structure

Here’s a quick look at the folder layout:

├── .eleventy.js               # Eleventy config
├── postcss.config.js          # PostCSS setup
├── tailwind.config.js         # Tailwind custom config
├── package.json               # Dependencies & scripts
├── src/
│   ├── styles/main.css        # Tailwind CSS entrypoint
│   ├── _includes/             # Nunjucks layouts/partials
│   │   ├── layouts/base.njk
│   │   └── partials/header.njk
│   ├── index.njk              # Homepage
│   └── about.njk              # About page
└── _site/                     # Built site (auto-generated)

You’ll find an extendable base layout, simple partials, and clean CSS output.

Customizing Tailwind

You can modify the included tailwind.config.js to adjust colors, fonts, and more. Here’s a sample of what’s included:

module.exports = {
  content: ["./src/**/*.{njk,html,js}"],
  theme: {
    extend: {
      colors: {
        brand: '#your-color',
      },
    },
  },
  plugins: [],
}

Want to use Tailwind plugins? Just install them and add to the plugins array.

Deployment

After running:

npm run build

Your site with static files will be ready for production inside the _site/ folder.

This works with popular static hosts out of the box:

Platform Build Command Output Directory
Netlify npm run build _site
Vercel npm run build _site
GitHub Pages npm run build _site
Surge.sh npm run build _site

Contribute or Fork It

This is meant to be a helpful starting point and community resource. Contributions are welcome!

Final Thoughts

If you’re learning 11ty/Eleventy or Tailwind (or both!), this starter should save you time and reduce frustration. It’s lightweight, extensible, and avoids the bloat of more complex boilerplates.

I’d love to see what you build with it. Feel free to share feedback or ideas!

View the repo here.

Back to Blog