Since we’ve already created all the files and downloaded the proper dependencies, the final thing for us to do, is to make sure that Tailwind knows where to target.
Inside of tailwind.config.js
// tailwind.config.js
module.exports = {
content: [
"./src/**/*.{njk,md,html}",
"./src/_includes/**/*.njk",
],
}
Above, we’re telling Tailwind where to expect to see it’s classes to target and update with styles, especially for our output directory.
To finish setting up Tailwind, all we need to do is include the styles inside of src/styles.css
/* styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
With those in place, we’re now off to the races with using Tailwind in our 11ty project. Let’s create our home page at src/index.njk
{# src/index.njk #}
<div class="flex flex-row w-full h-full items-center justify-center">
<h1>Welcome to the home page</h1>
</div>
With these classes, we’re making our div into a flexbox, making sure the height and width fill up the space, and centering our content.