https://github.com/taylorbryant/gatsby-starter-tailwind
Gatsby starter styled with Tailwind CSS
https://github.com/taylorbryant/gatsby-starter-tailwind
gatsby purgecss react starter tailwind
Last synced: about 1 year ago
JSON representation
Gatsby starter styled with Tailwind CSS
- Host: GitHub
- URL: https://github.com/taylorbryant/gatsby-starter-tailwind
- Owner: taylorbryant
- License: mit
- Created: 2018-03-25T04:26:39.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-04-27T04:17:31.000Z (about 3 years ago)
- Last Synced: 2025-04-04T09:05:46.366Z (over 1 year ago)
- Topics: gatsby, purgecss, react, starter, tailwind
- Language: JavaScript
- Homepage: https://gatsby-starter-tailwind.taylorbryant.dev
- Size: 8.23 MB
- Stars: 494
- Watchers: 5
- Forks: 88
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-tailwindcss - Gatsby Starter - Gatsby starter using Tailwind CSS. (Starters & Themes)
README
# Gatsby Starter Tailwind
[](#contributors)
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](https://tailwindcss.com)
## What is Gatsby?
> "Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps." -[Gatsby](https://www.gatsbyjs.org/)
## Get started
Install the Gatsby CLI:
```sh
npm install --global gatsby-cli
```
Create a new Gatsby project using this starter:
```sh
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:
```sh
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
[](https://app.netlify.com/start/deploy?repository=https://github.com/taylorbryant/gatsby-starter-tailwind)
### Vercel
[](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Ftaylorbryant%2Fgatsby-starter-tailwind%2Ftree%2Fmaster)
## Resources
- [Gatsby documentation](https://www.gatsbyjs.org/docs/)
- [Tailwind documentation](https://tailwindcss.com/docs/what-is-tailwind/)
- [Prettier documentation](https://prettier.io/docs/en/index.html)
- [ESLint documentation](https://eslint.org/docs/user-guide/configuring)
## License
[MIT](https://github.com/taylorbryant/gatsby-starter-tailwind/blob/master/LICENSE.md)
## How you can help
Enjoying Gatsby Starter Tailwind and want to help? You can:
- [Create an issue](https://github.com/taylorbryant/gatsby-starter-tailwind/issues/new) with some constructive criticism
- [Submit a pull request](https://github.com/taylorbryant/gatsby-starter-tailwind/compare) with some improvements to the project
## Contributors
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
impulse
💻
Georgios Andreadis
💻
Chris
💻
Dhaifallah Alwadani
💻
Nigel Ball
🤔 💻
Monte Hayward
💻
Luke Bennett
💻
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!