Building my site with GatsbyJS and TailwindCSS

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

🔔 This article was originally posted at MihaiBojin.com. 🔔

Photo by HalGatewood.com 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.

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.

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

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

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.

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 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/.

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/.

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
• Create a page component
• Deploying and hosting GatsbyJS sites

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