Skip to content

Portfolio site built with Gatsby JS and styled with Tailwind CSS and twin

Notifications You must be signed in to change notification settings

sparker888/sparker888-archive

Repository files navigation

Stephen Parker builds fast websites.

I build blazing fast websites and apps.

This is an example of a Lighthouse report that scores websites in key areas related to Google's new Web Vitals that started rolling out in June 2021. This site with these stellar scores was created for a special client.

Here's why it's important to businesses, and Forbes take on why you should care.

Aloha 🤙 and thanks for stopping by.

I'm a web developer @GoGravital • 🚁 FAA-certified drone pilot • 📸 PPA Photographer • and 🚀 Gamer.

💡 Here's why I picked Gatsby + Tailwind + Twin for my portfolio site.

Why Gatsby?

Gatsby uses powerful pre-configuration to build a website that uses only static files for incredibly fast page loads, service workers, code splitting, server side rendering, smart image loading, asset optimization, and data prefetching. It's incredibly easy to work with. It's ideal for small websites, landing pages, and simple PWAs. Gatsby and supporting technologies enables me to achieve the Lighthouse scores that you see above.

Why Tailwind?

Max Stoiber, the inventor of styled components, tells the story better than I can in his article "Why I Love Tailwind". Here's a rundown of some of the benefits I've seen using it:

  • Human readable
  • Low specificity by default
  • Handles variations
  • Modular/Composable
  • Performant
  • Doesn’t make naming hard
  • Allows safe refactoring
  • Extensible
  • Does not enforce bad markup patterns
  • Positive impact on developer velocity/productivity
  • Reasonable learning curve

Why CSS-in-JS (Emotion and Styled Components)?

I'll assume you're on board the CSS-in-JS train by now, but if not, I encourage you to check out CSS in JS, an Emotional Topic devMode.fm podcast episode. There are some really nice advantages to working with Styled Components (CSS-in-JS), including:

  • Local Scoping
  • Encapsulation
  • Portability
  • Reusability
  • Dynamic Functionality

For more details, see this Tuts which also goes into more detail on the cons and some examples.

Why twin?

Twin blends the magic of Tailwind with the flexibility of CSS-in-JS! It leverages Tailwind's marvelous system and developer experience without the downsides of atomic CSS. More importantly, it's the combination of Gatsby, Tailwind and twin that allows us to do some amazing stuff. Here is the original article by Andrew Welch that got me excited for this powerful combination of front-end React-based technologies.

This repository is public to demonstrate how a Gatsby, Tailwind + Twin site is built

This repo started with gatsby init and I added and configured the following plugins (if not already part of the initial install):

From there, I followed the Tailwindcss Gatsby installation documentation in tandem with the twin.macro Gatsby Installation documentation to configure the setup. Additional configuration of PostCSS came from Andrew's article, and finally, a few helpful bits were gleaned from gatsby-tailwind-emotion-starter from Paulo Elias.

Thanks for your interest! You can follow me on Twitter at @sparker888.

Fly safe!

Releases

No releases published

Packages

No packages published