Custom Tailwind Starter

Demo

A Gatsby starter styled using Tailwind, a utility-first CSS framework.
Uses Purgecss to remove unused CSS.

Lighthouse Audit

Features

Custom Fonts

You can import your npm packaged fonts via the gatsby-browser.js

Those fonts can be imported via the tailwind.config.js and used globally, e.g. className="font-inter" or className="font-body". You can change the names as you wish. Remember "Spaces" wont be escaped, so use "Open Sans" instead.

gatsby-plugin-react-helmet

For SEO optimization

gatsby-plugin-purgecss

To remove unused CSS styles

Husky + pretty-quick

 "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  }

Automatic prettify all staged files before you commit.

What is Tailwind?

"Tailwind is a utility-first CSS framework for rapidly building custom user interfaces." –Tailwind

What is Gatsby?

"Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps." -Gatsby

Get started

Install Gatsby CLI:

yarn global add gatsby-cli
npm i --global gatsby-cli

Create new Gatsby project using this starter:

gatsby new my-new-website https://github.com/Mozart409/gatsby-custom-tailwind

Change the directory and start the dev server.

cd my-new-website
yarn start or npm start

Build your site

Each time you build, the cache and public folder will be deleted to prevent stale data and files. The production build will be served with zeit/serve server. Alternatively you can build without deleting the cache and public folder.

"build": "gatsby clean && gatsby build",
"build:noclean": "gatsby build",
"serve": "serve -l 9000 public",
"prod": "yarn build && yarn serve",

M0nica/gatsby-custom-tailwind