Adding Tailwindcss to my Gatsby website
Tags: tailwindcss
Published: 2020-11-17 19:02:15

After following a react formation, I've decided to make a Gatsby website using  Contentful content, and for CSS, I've used bootstrap to help me get something good, also helped with framer-motion for animation.

But now, I want some change and add Tailwind for sure !!

Let's follow the steps to start your journey with [tailwindcss](https://tailwindcss.com/). 🚀

1. Install Tailwind
2. install gatsby-plugin-postcss
3. Custom CSS
4. Purging your CSS

## 1) Install Tailwindcss

In your terminal in your Gatsby project, install Tailwind : 

```
# Using NPM

npm install tailwindcss --save-dev

# Using Yarn

yarn add tailwindcss --dev
```
## 2) Generate a tailwind config file

In your terminal, still in your gatsby project, just run the following :

```
npx tailwindcss init
```

You will have a new **tailwind.config.js** file.

## 3) Install the plugin gatsby-plugin-postcss

You will need also to install the Gatsby PostCSS plugin ***gatsby-plugin-postcss.***

Tailwind is built on PostCSS, that's why weed the plugin.

To install the plugin, just run the following in your terminal :

```
# Using NPM
npm install --save gatsby-plugin-postcss

# Using Yarn
yarn add gatsby-plugin-postcss

```

## 4) Include the plugin in your `gatsby-config.js`

We need to configure Gatsby, hence in your gatsby-config.js, just add the plugin as below (see my example):

```
module.exports = {
	siteMetadata: {
		title: `Dreaminh, illustrations, aquarelles & letterings`,
		siteUrl: `https://www.dreaminh.com`,
...
	},
	plugins: [
		`gatsby-plugin-react-helmet`,
		`gatsby-plugin-offline`,
		`gatsby-plugin-netlify`,
...
		 `gatsby-plugin-postcss`,
	]
};
```

## 5) Configure PostCSS to use Tailwind

- To configure PostCSS, you need to create an empty `postcss.config.js` file in your project's root.
- Add the following content

```
const tailwind = require('tailwindcss')

module.exports = () => ({
    plugins: [tailwind('./tailwind.config.js'),require("autoprefixer")],
})
```

## 6) Add CSS File with tailwind directives

We are getting close, we just need to add our tailwind directives in our css.

Best practise is to create a **global.css** file such as ***src/styles/global.css*** and add the following :

```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

## 7) Use of Tailwind

To finalize the installation, we need to import Tailwind in `gatsby-browser.js`

```
import "./src/styles/global.css"
```

🚀  And that's it! You should now begin to play with Tailwindcss, as basic configuration is done.

I hope you will accomplish great things with this framework, obviously to go further don't hesitate to check on the official document, especially to build your custom theme. [[talwindcss documentation](https://tailwindcss.com/)]

## Tailwind toolbox
Please find the library which can be helpful : 

[https://tailwindcomponents.com/](https://tailwindcomponents.com/)

[https://mertjf.github.io/tailblocks/](https://mertjf.github.io/tailblocks/)

[https://tailwind.build/](https://tailwind.build/)

### You can find me on:

- Instagram: [https://instagram.com/regisnut](https://instagram.com/regisnut)
- Twitter: [https://twitter.com/regisnut](https://twitter.com/regisnut)
- Portfolio: [https://regiscode.netlify.app/](https://regiscode.netlify.app/)
- GitHub: [https://github.com/regisnut](https://github.com/regisnut)