Getting setup with Tailwind & Gatsby
Tags: react, gatsby, css, tutorial
Published: 2020-06-12 19:46:02

I redesigned this site a while ago, moving from Jekyll over to Gatsby mainly because I wanted to learn some React. The learning curve was steep as I was coming from mainly an HTML, CSS and Python background. Never really spent too much time playing with JS, apart from JQuery the much more simplified JS Library.

Playing around with Gatsby and React, I started building out separate `.scss` files for each component which got harder and harder to manage. I then found TailWindCSS a utility first CSS framework, the way I styled by components changed for the better.

At first, I struggled to get to grips with setting it up within Gatsby, after a few links and youtube videos I got everything set up the way I wanted and below is how I did just that.

## Create your Gatsby project
Install the Gatsby CLI globally if you don't have it already

```bash
npm install -g gatsby-cli
```

Create your new site and then `cd` into the directory

```bash
gatsby new <project-name> && cd <project-name>
```

## Adding TailWindCSS
Once the project has finished building you're now able to add TailWind

```bash
# Using npm
npm install tailwindcss

# Using Yarn
yarn add tailwindcss
```

Once that has completed then add a `.css` file to your `src/components` folder to inject Tailwind's `base`, `components`, and `utilitiesstyles` into your CSS:

```css
@tailwind base; 
@tailwind components; 
@tailwind utilities;
```
### Create a TailWind config file (optional)
You can skip this bit if you want too, but I would recommend creating one as you can change the behaviour of TailWind with it. I generally use it to center my containers as a default.

```bash
npx tailwindcss init
```

Which will create a file with the below structure. I have added my own file to help show how I use it.

```javascript
// tailwind.config.js
module.exports = {
  theme: {
	container: {
		center: true
	},
}
```

Learn more about configuring Tailwind in the [configuration documentation](https://tailwindcss.com/docs/configuration).

## Using TailWind with PostCSS
[This](https://tailwindcss.com/docs/installation#4-process-your-css-with-tailwind) is where I got stuck when following the TailWind instructions on installing it. Gatsby being Gatsby there was a plugin for PostCSS, so we need to install that.

```bash
npm install --save gatsby-plugin-postcss
```

Once the plugin has finished installing, we need to add the config to our `gatsby-config.js` file by adding the following.

```javascript
// gatsby-config.js
{
 resolve: 'gatsby-plugin-postcss',
	options: {
 		postCssPlugins: [require('tailwindcss')('./tailwind.config.js')],
	 },
 },
```

This now includes the `tailwind.css` and `tailwind.config.js` file, so we're able to process the CSS.

## Final step
Now all that is left is to import the tailwind.css file via our `gatsby-browser.js` file by simply adding the following line.

```javascript
// gatsby-browser.js
import "./src/components/tailwind.css"
```

## Purging the CSS
Now everything is set up, it's time to set up purge css so we're able to remove any unused CSS.

```bash
npm i --save gatsby-plugin-purgecss
```

```javascript
// gatsby-config.js
{
  resolve: `gatsby-plugin-purgecss`,
  options: { tailwind: true }
}
```

Now this should clean up your unused CSS making your site even faster!

## Done

Now you're able to use TailWind within your Gatsby project with ease. Simply just add the class names to your JSX and then run `gatsby develop` to see the changes.