Install Tailwind CSS with Eleventy

Setting up Tailwind CSS in an Eleventy project.

Create your project

Start by creating a new Eleventy project if you don’t have one set up already. The most common approach is outlined in their getting started guide.

Terminal

mkdir my-project
cd my-project
npm init -y
npm pkg set type="module"
npm install @11ty/eleventy
mkdir src
touch src/index.html

Install Tailwind CSS

Install @tailwindcss/vite and its peer dependencies via npm.

Terminal

npm install tailwindcss @tailwindcss/vite

Install the Eleventy Vite Plugin

Install @11ty/eleventy-plugin-vite and its peer dependencies via npm.

Terminal

npm install @11ty/eleventy-plugin-vite

Import Tailwind CSS

Create src/styles.css file and add an @import for Tailwind CSS.

src/styles.css

@import "tailwindcss";

Configure Eleventy

Create a eleventy.config.js file in your project root, and add the @11ty/eleventy-plugin-vite and @11ty/eleventy-plugin-vite plugin. Include an addPassthroughCopy to copy your CSS to the output folder.

eleventy.config.js

import EleventyVitePlugin from "@11ty/eleventy-plugin-vite";
import tailwindcss from '@tailwindcss/vite'
export default (eleventyConfig) => {
  eleventyConfig.addPassthroughCopy("src/styles.css");
  eleventyConfig.addPlugin(EleventyVitePlugin, { 
    viteOptions: { 
      plugins: [ tailwindcss() ] 
    } 
  });
};
export const config = {
  dir: {
    input: "src",
  },
};

Start your build process

Run your build process with npx eleventy --serve.

Terminal

npx eleventy --serve

Start using Tailwind in your project

Add your CSS file to the <head> and start using Tailwind’s utility classes to style your content.

src/index.html

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="./styles.css" type="text/css" rel="stylesheet" />
  </head>
  <body>
    <h1 class="text-3xl font-bold underline  text-amber-500">
      Hello world!
    </h1>
  </body>
</html>