Using Tailwind with Eleventy
If you want to use TailwindCSS to style your Eleventy site but don't know the simplest way to do so, then you've come to the right place. In this quick article I am going to cover the fastest way to get up-and-running.
This post is going to assume you already have an Eleventy site set up - if not, follow their Getting Started Guide.
The first thing to do is install the dependencies we will need:
npm install -D tailwindcss concurrently
Next, let's set up a Tailwind config.
npx tailwindcss init
Now it is time to modify the tailwind.config.js
that was generated for us. This may look slightly different depending on the template language you're using, here is what mine looks like as a Pug user:
module.exports = {
content: ["**/*.pug"],
theme: {},
plugins: [],
}
The next step is to create a .css
file that will include the Tailwind directives. I chose to put this at /styles/global.css
:
@tailwind base;
@tailwind components;
@tailwind utilities;
Next, lets set up the package.json
script(s) that will allow us to build our CSS:
"dev": "concurrently \"npm run dev:css\" \"npm run dev:11ty\"",
"dev:11ty": "npx @11ty/eleventy --serve",
"dev:css": "npx tailwindcss -i ./styles/global.css -o ./vendor/global.css --watch"
Now when you run npm run dev
you should see a vendor
folder generated containing a global.css
file. This is the file that we're going to include in our Eleventy templates. I would recommend adding the vendor
folder to your .gitignore
file!
Before that, we need to make one change to the Eleventy config to make sure our vendor
folder is copied to the _site
folder when we build our project.
Create a .eleventy.js
file and ensure it includes the following:
module.exports = (eleventyConfig) => {
eleventyConfig.addPassthroughCopy('vendor')
// Rebuild the site whenever there is a change in the `vendor` directory.
eleventyConfig.addWatchTarget('vendor')
/**
* We need this option so 11ty allows us to watch the .gitignore'd `vendor`
* directory.
*/
eleventyConfig.setUseGitIgnore(false)
}
The only thing left to do at this point is to include the built vendor/global.css
file in one of your Eleventy template files (preferably a layout).
<link rel="stylesheet" href="/vendor/global.css">
Now, start styling with Tailwind!