October 21st, 2019

Building a blog with Gatsby and Tailwind

  • #Contentful
  • #Gatsby
  • #Tailwind
  • #Rich text
  • #Static site generator
Finally onboarding! Are you also reading several different personal blogs these days? I was one of those people who read blogs on a daily basis (and loved it). I added it to my to-do list to create one as well. I must admit it stayed on the to-do list for quite a few months. Writing publicly can be quite daunting. Is your content good enough? Are people going to make fun of your skills and level?
Last week I week was attending https://jamstackconf.com/sf/ in San Francisco. Which was an amazing conference! What finally got me truly believing in writing my own blog was Zach Leatherman's talk about owning your own content on the web. (Check the talk). So enough with the why building, let's move on the to (JAM)stack used for this blog.

Choosing a static site generator

I have been a fan of the JAM stack for a few months. The idea of moving the heavy lifting from the server to the build process really spoke to my imagination. If you need the same introduction to JAM stack as I had, I recommend checking out https://jamstack.wtf/. It's an amazing resource explaining the concept and building blocks of JAM Stack. JAM stack is all about JavaScript, API's and Markdown.
JavaScript
Dynamic functionalities are handled by JavaScript. There is no restriction on which framework or library you must use.
APIs
Server side operations are abstracted into reusable APIs and accessed over HTTPS with JavaScript. These can be third party services or your custom function.
Markup
Websites are served as static HTML files. These can be generated from source files, such as Markdown, using a Static Site Generator.
As you'll notice for the markdown part, it all starts with a static site generator which can generate your HTML. So this is the first decision you have to make. Pro tip: It's not an easy one. You can find an overview of popular SSG's via this https://www.staticgen.com. A static site generator choice is based on your own preferences. I wanted to get into React for a long time (It was on the to-do list as well). So it came down to Next.js or Gatsby for me. What got me choosing Gatsby was the wide eco system of plugins available. Even though I still want to give Next.js a try as well. Furthermore Eleventy and Nuxt.js (Vue.js based) are high on my list too.

Styling your content with Tailwind

As I was kind of new to React and it's components I wanted to start building from scratch and writing my own CSS without using a template (Resulting in this very-basic look and feel). After reading https://refactoringui.com/ by Steve Schoger and Adam Wathan I started believing that I could make a decent UI as a developer myself. Especially when they decided to incorporate all their book-knowledge in a hands on CSS framework called https://tailwindcss.com/.

Integrating Tailwind with Gatsby

Install Tailwind
npm i tailwindcss
Create a CSS-file and include Tailwind
Create a global CSS-file inside your src folder. You can create a css folder and name the file global.css
globalcss.png
After creating this global.css file you can include Tailwind in your css by using their @Tailwind directive.
@tailwind base;

@tailwind components;

@tailwind utilities;
Load the CSS into your Gatsby site
You can load the CSS file in two ways. Via a layout component or via gatsby-browser.js. In general, for global styles like Tailwind, the component way is preferred. (Read more)
Load your created global.css inside your layout.js file. Make sure to reference it from the correct path.
layout.png
Creating a tailwind config file
By installing tailwindcss via NPM in a previous step you can now create a Tailwind config file to add your own utility classes or extend the existing ones.
Run below comment from your terminal at the root of your project
./node_modules/.bin/tailwind init
Or
npx tailwind init
This command should create an empty tailwind.config.js-file where you can customize Tailwind. By default, the generated file should look like this
module.exports = {
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
}
Reduce the generated CSS size
Install the Gatsby-plugin-postcss
npm install --save gatsby-plugin-postcss
Add the plugin
// in gatsby-config.js plugins: [`gatsby-plugin-postcss`],
Create a postcss.config.js file, this will optimize your Tailwind css size in your build chain process.
const tailwindcss = require(`tailwindcss`)

module.exports = {
  plugins: [tailwindcss(`./tailwind.config.js`), require(`autoprefixer`)],
}
Start using Tailwind utility classes in your React components!
function BioHero() {
  return (
    <StaticQuery
      query={bioHeroQuery}
      render={data => {
        const { author, description } = data.site.siteMetadata
        return (
          <div className="w-full mx-auto flex flex-col items-center">
            <Image
              fixed={data.avatar.childImageSharp.fixed}
              alt={author}
              className="rounded-full border-teal-500 border-2"
            />
            <h2 className="text-5xl font-medium my-6">Hi there!</h2>
            <p className="text-xl mb-6 w-64 text-center">{description}</p>
          </div>
        )
      }}
    />
  )
}

Editing your content

In a next blog I'll cover handling your content with Contentful and how to write specific Tailwind styling for Rich Text data by Contentful. Stay tuned!
Eli Colpaert

By Eli Colpaert

Working at delaware, professional SAP C/4 enthusiast and quite passionate about new Open-Source technology.