Gatsby Starter Tailwind

Gatsby and Tailwind CSS logos
A Gatsby starter styled using Tailwind CSS, a utility-first CSS framework.
Uses Tailwind CSS' built-in purge option to remove unused CSS.
Illustrations by unDraw.

View demo here.

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

Deployment

Netlify

Vercel

Resources

License

MIT

How you can help

Enjoying Gatsby Starter Tailwind and want to help? You can:

Contributors

Thanks goes to these wonderful people (emoji key):

impulse
impulse

šŸ’»
Georgios Andreadis
Georgios Andreadis

šŸ’»
Chris
Chris

šŸ’»
Dhaifallah Alwadani
Dhaifallah Alwadani

šŸ’»
Nigel Ball
Nigel Ball

šŸ¤” šŸ’»
Monte Hayward
Monte Hayward

šŸ’»
Luke Bennett
Luke Bennett

šŸ’»

This project follows the all-contributors specification. Contributions of any kind welcome!

Top categories

tailwind logo

Need a Tailwind website built?

Hire a professional TailwindCSS developer today.
Loading Svelte Themes