Building my site with GatsbyJS and TailwindCSS
Tags: gatsby, tailwindcss, website, wevdevelopment
Published: 2021-06-15 13:24:20

---
title: Building my site with GatsbyJS and TailwindCSS
published: true
date: 2021-06-15 00:00:00 UTC
tags: GatsbyJS,TailwindCSS,Website,WevDevelopment
series: Building a developer blog with GatsbyJS
canonical_url: https://MihaiBojin.com/personal-site/gatsbyjs-and-tailwindcss-tech-stack
---

🔔 This article was originally posted on my site, [MihaiBojin.com](https://mihaibojin.com/personal-site/gatsbyjs-and-tailwindcss-tech-stack?utm_source=DevTo&utm_medium=organic&utm_campaign=rss). 🔔

---

![Photo: Website mock-ups](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nbhdznhk062pnfziavea.jpeg)

Back in the [introductory article in this series](https://MihaiBojin.com/personal-site/building-a-personal-site "Building a personal site"), I decided to base my tech stack on [Gatsby](https://www.gatsby.com/ "GatsbyJS - static site generator").

I won't get into all of Gatsby's features, but here is why I chose this tech stack:

- Performance: server-side rendered HTML that can be cached by a CDN and distributed globally to any user at blazingly fast speeds (Gatsby's [automatic image optimizations](https://www.gatsbyjs.com/docs/conceptual/using-gatsby-image/ "Gatsby Image Optimizations") also have a net benefit here!)
- Strong, [out-of-the-box SEO support](https://www.gatsbyjs.com/docs/how-to/adding-common-features/seo/ "GatsbyJS SEO features") - Gatsby makes it super easy to generate metadata, but it's also straightforward to write your code (e.g., [adding structured semantic data with json-ld](https://MihaiBojin.com//personal-site/structured-semantic-data-with-json-ld))
- Articles in code - I did not want to integrate with a 3rd party CMS/backend - I find it simpler to commit Markdown to GitHub
- [Out of the box accessibility](https://www.gatsbyjs.com/docs/conceptual/making-your-site-accessible/ "Making your GatsbyJS site accessible") support; through linting and other features, Gatsby makes accessibility front-and-center!
- Great ecosystem and easy extendability - Gatsby is built with [React](https://reactjs.org/ "ReactJS - javascript library for building UI"), making writing plugins and components super easy!

## Setting up a new GatsbyJS site

Before going further, I recommend going through [Gatsby's tutorial](https://www.gatsbyjs.com/docs/tutorial/ "Tutorial: Learn how GatsbyJS works"). It's an excellent resource for getting a high-level understanding of how Gatsby works!

The next step is to look at the [starters library](https://www.gatsbyjs.com/starters/ "GatsbyJS starter plugins"). One of these may even do what you need. In my case, I was a bit more opinionated towards what I wanted to achieve, so I started from a blank gatsby site.

The first step is to install Gatsby CLI. This command will be your entry point for all things Gatsby.

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

Then, create a blank Gatsby site; I called my repo `personal-site`, but you can choose any name:

```
gatsby new personal-site
```

Next, it's time to install plugins; I decided to use [Tailwind](https://tailwindcss.com/ "Tailwind CSS utility framework").

```
cd personal-site

# Install the necessary plugins
npm install -D gatsby-plugin-postcss tailwindcss@latest postcss@latest autoprefixer@latest

# Init the tailwind.config.js file
npx tailwindcss init -p
```

(You can also follow a more [in-depth tutorial](https://tailwindcss.com/docs/guides/gatsby "TailwindCSS and GatsbyJS integration guide") if you want.)

To optimize your site in production, you should remove unused CSS styles from the resulting CSS code with [purge](https://tailwindcss.com/docs/guides/gatsby#configure-tailwind-to-remove-unused-styles-in-production).

To do that, add PostCSS by editing your `gatsby-config.js` file and appending `gatsby-plugin-postcss` to your configuration:

```
module.exports = {
  plugins: [
    ...
    `gatsby-plugin-postcss`,
  ]
}
```

Side-note: `gatsby-config.js` is the 'heart' of your GatsbyJS project - this is where you define configurations, add plugins, and can even store metadata about your site (e.g., title, site\_url, etc.).

The final step is to add all of Tailwind's CSS to your project.

Create a file called: `src/styles/global.css` and define the following directives:

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

For my site, as I'm not a UI designer, I decided [to buy TailwindUI](https://tailwindui.com/pricing "TailwindUI pricing page"). **I am delighted with my choice! It is one of the best investments I have made so far!!!** It allowed me to get a great-looking site with almost zero CSS knowledge and minimal effort.

> Disclaimer: I am not associated with any of the Tailwind products and have provided an objective view based on my own experience!

To [set up TailwindUI](https://tailwindui.com/documentation#getting-set-up "In-depth guide to setting up TailwindUI"), I installed these plugins:

```
npm install tailwindcss@latest

npm install @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio

npm install @headlessui/react @heroicons/react
```

## Optional configuration

### Syntax highlighting

Since this site targets software engineers, you will also need syntax highlighting for any code samples. The obvious choice is [PrismJS](https://prismjs.com/ "PrimsJS syntax highlighting").

Install the necessary plugins:

```
npm install gatsby-transformer-remark gatsby-remark-prismjs prismjs
```

Then add `gatsby-remark-prismjs` to your `gatsby-config.js` file:

```
module.exports = {
  plugins: [
    ...
    `gatsby-remark-prismjs`,
  ]
}
```

### Code linting

The site would be pretty much ready to use, but I like a bit of consistency in my code, so next, I configured Prettier and ESlint:

```
npm install -g prettier eslint
```

I'm using VSCode, and I installed the prettier plugin:

```
# Open the command palette (Cmd-Shift-P on MacOS)
type: ext install esbenp.prettier-vscode
press Enter
```

Next, I stored my prettier configs in the project's workspace. Again, from the command palette (Cmd-Shift-P), select "Preferences: Open Workspace Settings (JSON)" and add the following configuration:

```
{
  // Set the default
  "editor.formatOnSave": false,
  // Enable per-language
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "markdownlint.config": {
    "MD033": false
  }
}
```

Also, create a `.prettierrc` file and add the following config:

```
{
  "arrowParens": "always",
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 70
}
```

### Replacing the main font

One last thing you can do is configure a custom font - I went with TailwindUI's one.

```
# Install the font
npm install @fontsource/inter
```

Then edit `gatsby-browser.js` and add:

```
import '@fontsource/inter';
```

Finally, edit `tailwind.config.js` and add the following block:

```
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans],
      },
    },
  },
```

It's worth saying that the [official tutorial](https://tailwindui.com/documentation#optional-add-the-inter-font-family "Adding the Inter font family in TailwindCSS") didn't quite work for me. If you compare these steps with the official docs, you'll notice that I'm importing `@fontsource/inter`, not `@fontsource/inter.css`, and the font name is `Inter`, not `Inter var`. I hope this is useful to others!

## Running the site

You can run the site in development mode (fast refreshes) with:

```
gatsby develop
```

which will host your Gatsby site running in **development** mode at [http://localhost:8000/](http://localhost:8000/).

When you're ready to publish it, execute:

```
gatsby build
gatsby serve
```

which will host your Gatsby site running in **production** mode at [http://localhost:9000/](http://localhost:9000/).

At this point, you can start adding pages and content. For now, I won't cover adding pages or where to host, but here is a list of resources that should help:

- [Create your first Gatsby site](https://www.gatsbyjs.com/docs/tutorial/part-1/)
- [Create a page component](https://www.gatsbyjs.com/docs/tutorial/part-2/#create-a-page-component)
- [Deploying and hosting GatsbyJS sites](https://www.gatsbyjs.com/docs/deploying-and-hosting/)

---

If you enjoyed this article and want to read more like it, [please subscribe to my newsletter](https://motivated-founder-807.ck.page/db1cf284bf); I send one out every few weeks!