Before we begin
This article was supposed to go up yesterday, as per my workflow. I however had to deal with technical issues - namely my ISP.
I spent most of the day on calls trying to get reconnected...
Not fun times I tell you...
Eleventy & Tailwind
So, it that's time... The time I've been putting off. But since we added plugins to our site last time, I think we can now add tailwind to it.
DESCLAIMER
You do not have to add Tailwind to your site. If you're alright with the CSS we have currently, you can stick to that.
Install & Setup Tailwind
Let's not waste any time and get straight into it.
Open your terminal and run the following command:
npm install -D tailwindcss postcss autoprefixer
Then initialise the tailwind config file:
npx tailwindcss init
In the root of the project create a postcss.config.js
with this:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
We'll then create a CSS file with the Tailwind directives. We will put it in the same folder that has our current stylesheet
/* src/assets/css/tailwind.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;
Then edit the content array in our tailwind config to watch for our files:
/* tailwind.config.js*/
 content: ["./src/**/*.{njk,md}", "./src/**/*.svg",]
Lastly, include our CSS file in our base.njk
. Just below where we had our stylesheet before in the head tag, add this
<link rel="stylesheet" href="{{ '/assets/css/tailwind.css' | url }}">
Don't forget to comment out the other link
Modifying Scripts to Run Tailwind and Eleventy
if you recall when we setup our project, we only added ways to run our Eleventy.
For our new setup to work both Tailwind and Eleventy need to be running concurrently. Luckily for us there is a package that makes that easier - npm run all - let's install it
npm install npm-run-all --save-dev
Then we have to modify our scripts in package.json
to ensure that event when we deploy, our new styles are present.
"scripts": {
"start": "npm-run-all -p dev:*",
"build": "run-s build:*",
"dev:11ty": "eleventy --serve",
"dev:css": "tailwindcss -i src/assets/css/tailwind.css -o _site/assets/css/tailwind.css --watch --postcss",
"build:11ty": "eleventy",
"build:css": "tailwindcss -i src/assets/css/tailwind.css -o _site/assets/css/tailwind.css --postcss"
},
We have created a few more scripts:
- To run Eleventy in development -
dev:11ty
- To build Eleventy -
build:11ty
- To run Tailwind in development and watch for changes -
dev:css
- To build Tailwind -
build:css
We then modify our start and build script with the package we installed so our project runs as we intend.
Testing If It Works
After adding a few classed to base.njk
and _navigation.njk
Our site should look like this:
It seems counter intuitive what we've done to undo all the styling we had, I know. But for me in the long run, it'll be easier to maintain tailwind styles over raw CSS.
Getting the most out of our tailwind setup
Owing to the way that Tailwind works, I would suggest changing any source files to .njk
so we can easily style them.
Also, if you recall the shortcode we made for our heading and subtitle:
So we don't have to modify our tailwind config, I would move it to a shortcode folder in _includes
Conclusion
There wasn't a lot that we did today. Adding tailwind and modifying how our site works. It is par course as it is the end of the week.
Join me next week where I have something special lined up...
As always:
- The live site: https://learneleventy.netlify.app
- The working repo: Part 7: Add Tailwind
- The docs: https://www.11ty.dev/docs/
- The discord: https://www.11ty.dev/blog/discord/
Thank you for reading, let's connect!
Thank you for visiting this little corner of mine. Let's connect on Twitter, Polywork and LinkedIn
Top comments (3)
Thanks, this useful series helped me get my project going quickly.
When I used the below to write the compiled CSS file to my output folder, I kept getting server errors about the files being corrupt. They showed up as 304s and 404s. I could't figure out why. May be a permissions issue 🤷🏾‍♀️.
As a solution / workaround 👇🏾 I wrote the complied CSS to my input folder and used the 11ty passthrough to get it into my output folder and that worked fine.
In case this helps somebody.
Of course... I'm glad it's been helpful.
Hmmm, that's odd... But as long as you got it to work
in package.json I had to add quotes around
dev:*
andbuild:*
to get it working.also,
run-s
is shorthand fornpm-run-all -s
.