What is Tailwind CSS?

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

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 the Gatsby CLI:

npm i --global gatsby-cli

Create a new Gatsby project using this starter:

gatsby new my-new-website https://github.com/taylorbryant/gatsby-starter-tailwind

Build a stylesheet from your Tailwind CSS config and run the project in development mode:

cd my-new-website
npm run develop

Format and lint

  • npm run analyze - See what ESLint and Prettier can fix
  • npm run fix - Run Prettier and ESLint with the --fix option

Build your site

Use npm run build to build your site for production.

Resources