Let's Learn 11ty Part 7: Adding Tailwind
Tags: ssg, eleventy, tutorial, webdev
Published: 2022-06-17 17:57:04

## 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:

```sh
npm install -D tailwindcss postcss autoprefixer
```

Then initialise the tailwind config file:
```sh
npx tailwindcss init
```

In the root of the project create a `postcss.config.js` with this:
```js
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

```css
/* 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:

```js
/* 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

```html
 <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

```sh
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.

```json
  "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`

![base](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9giex7mspd2pb733wsq4.png)

![navigation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9mpf2g0man5tgj19tou5.png)

Our site should look like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bxp43voex5zynf938yew.png)


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:

![shortcode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u0042wrg1m4sr2dd9fxv.png)

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: https://github.com/Psypher1/learneleventy
- 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**](https://twitter.com/Psypher1), [**Polywork**](https://www.polywork.com/psypher1) and [**LinkedIn**](https://www.linkedin.com/in/jamesmidzi/)