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
- tailwindcss - CSS framework that will help with rapid custom interfaces
- postcss-cli - PostCSS CLI
Building the layout
First, create a base style.css
:
src/site/_includes/css/style.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
h2 {
@apply text-green-500;
}
}
Setup tailwind.config.js
:
module.exports = {
purge: {
content: [
"src/**/*.njk",
"src/**/*.md"
],
options: {
whitelist: [],
},
},
theme: {},
variants: {},
plugins: [],
};
Setup postcss.config.js
to require tailwindcss
as a plugin:
module.exports = {
plugins: [
require('tailwindcss')(`./tailwind.config.js`),
],
};
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 buildseleventy
with no flags.build
runsbuild:css
andbuild:html
in sequential order. Similiar tonpm run build:css && npm run build:html
.serve
has been updated to userun-p
which is shorthand fornpm-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
eleventyConfig.setUseGitIgnore(false);
// Watch for CSS changes
eleventyConfig.addWatchTarget("./.build/css/style.css");
// 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
postcss.config.js
module.exports = {
plugins: [
require(`tailwindcss`)(`./tailwind.config.js`),
require('autoprefixer')
],
};
Enable the purge with postcss-purgecss plugin
Enable PurgeCSS
and cssnano
on the dist
folder.
postcss.config.js
const purgecss = require('@fullhuman/postcss-purgecss')
module.exports = {
plugins: [
require('tailwindcss')(`./tailwind.config.js`),
require('autoprefixer'),
purgecss({
content: ['./**/*.html']
})
require('cssnano')({
preset: 'default',
}),
],
};
Update .gitignore
.gitignore
node_modules
.env
.vscode
.DS_Store
.build
dist
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 Mastodon @[email protected] .