Building my site with GatsbyJS and TailwindCSS

Setting up a simple responsive website with Gatsby, Tailwind, and Remark.

Mihai Bojin
Nerd For Tech
4 min readJun 15, 2021


🔔 This article was originally posted at 🔔

Photo by on Unsplash

Back in the introductory article in this series, I decided to base my tech stack on Gatsby.

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 also have a net benefit here!)
  • Strong, out-of-the-box SEO support — 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)
  • 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 support; through linting and other features, Gatsby makes accessibility front-and-center!
  • Great ecosystem and easy extendability — Gatsby is built with React, making writing plugins and components super easy!

Setting up a new GatsbyJS site

Before going further, I recommend going through Gatsby’s tutorial. 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. 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.

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

Next, it’s time to install plugins; I decided to use Tailwind.

(You can also follow a more in-depth tutorial if you want.)

To optimize your site in production, you should remove unused CSS styles from the resulting CSS code with purge.

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

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:

For my site, as I’m not a UI designer, I decided to buy TailwindUI. 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, I installed these plugins:

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.

Install the necessary plugins:

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

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:

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

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:

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

Replacing the main font

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

Then edit gatsby-browser.js and add:

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

It’s worth saying that the official tutorial 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:

which will host your Gatsby site running in development mode at http://localhost:8000/.

When you’re ready to publish it, execute:

which will host your Gatsby site running in production mode at 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:

If you enjoyed this article and want to read more like it, please subscribe to my newsletter; I send one out every few weeks!



Mihai Bojin
Nerd For Tech

Software Engineer at heart, Manager by day, Indie Hacker at night. Writing about DevOps, Software engineering, and Cloud computing. Opinions my own.