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: 1 day 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 (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-04-27T04:17:31.000Z (almost 2 years ago)
• Last Synced: 2025-01-17T18:11:51.202Z (15 days 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: 91
• 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

[![All Contributors](https://img.shields.io/badge/all_contributors-7-orange.svg?style=flat-square)](#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.

  


  




  

![alt text](https://i.ibb.co/McWdstP/localhost-8000-contact-i-Pad-Pro-1.png "Screenshot of Gatsby Starter Tailwind homepage")

  

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

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/taylorbryant/gatsby-starter-tailwind)

### Vercel

[![Deploy with Vercel](https://vercel.com/button)](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!