Awesome

Gatsby Starter Tailwind

<div align="center"> <img src="https://image.ibb.co/cJjPN7/gatsby_tailwind.png" alt="Gatsby and Tailwind CSS logos"> </div> <div align="center"> A <a href="https://www.gatsbyjs.org/">Gatsby</a> starter styled using <a href="https://tailwindcss.com/">Tailwind CSS</a>, a utility-first CSS framework. Uses Tailwind CSS' built-in purge option to remove unused CSS. Illustrations by <a href="https://undraw.co/">unDraw</a>. </div>

alt text

View demo <a href="https://gatsby-starter-tailwind.taylorbryant.dev/">here</a>.

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:

Create an issue with some constructive criticism
Submit a pull request with some improvements to the project

Contributors

Thanks goes to these wonderful people (emoji key):

<table> <tr> <td align="center"><a href="http://impuls.dev"><img src="https://avatars3.githubusercontent.com/u/8146736?v=4" width="100px;" alt="impulse"/> impulse</a> <a href="https://github.com/taylorbryant/gatsby-starter-tailwind/commits?author=impulse" title="Code">💻</a></td> <td align="center"><a href="https://gandreadis.com"><img src="https://avatars3.githubusercontent.com/u/5272244?v=4" width="100px;" alt="Georgios Andreadis"/> Georgios Andreadis</a> <a href="https://github.com/taylorbryant/gatsby-starter-tailwind/commits?author=gandreadis" title="Code">💻</a></td> <td align="center"><a href="https://github.com/altruisticsoftware"><img src="https://avatars3.githubusercontent.com/u/12105346?v=4" width="100px;" alt="Chris"/> Chris</a> <a href="https://github.com/taylorbryant/gatsby-starter-tailwind/commits?author=altruisticsoftware" title="Code">💻</a></td> <td align="center"><a href="https://github.com/dalwadani"><img src="https://avatars1.githubusercontent.com/u/4618082?v=4" width="100px;" alt="Dhaifallah Alwadani"/> Dhaifallah Alwadani</a> <a href="https://github.com/taylorbryant/gatsby-starter-tailwind/commits?author=dalwadani" title="Code">💻</a></td> <td align="center"><a href="http://nigelball.org"><img src="https://avatars2.githubusercontent.com/u/815408?v=4" width="100px;" alt="Nigel Ball"/> Nigel Ball</a> <a href="#ideas-nigelb135" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/taylorbryant/gatsby-starter-tailwind/commits?author=nigelb135" title="Code">💻</a></td> <td align="center"><a href="https://github.com/monte-hayward"><img src="https://avatars3.githubusercontent.com/u/3780422?v=4" width="100px;" alt="Monte Hayward"/> Monte Hayward</a> <a href="https://github.com/taylorbryant/gatsby-starter-tailwind/commits?author=monte-hayward" title="Code">💻</a></td> <td align="center"><a href="https://lukebennett.com.au"><img src="https://avatars0.githubusercontent.com/u/3422401?v=4" width="100px;" alt="Luke Bennett"/> Luke Bennett</a> <a href="https://github.com/taylorbryant/gatsby-starter-tailwind/commits?author=lukebennett88" title="Code">💻</a></td> </tr> </table>

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