Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/samuelgoddard/gatsby-tailwind-motion

An opinionated starter for Gatsby v2 with Tailwind and Framer Motion
https://github.com/samuelgoddard/gatsby-tailwind-motion

framer gatsby motion postcss tailwind

Last synced: 2 months ago
JSON representation

An opinionated starter for Gatsby v2 with Tailwind and Framer Motion

Awesome Lists containing this project

README

        

⚠️ This is no longer maintained in favour of my [Next Tailwind Motion](https://github.com/samuelgoddard/next-tailwind-motion) boilerplate ⚠️


Gatsby x Tailwind x Framer Motion Boilerplate

[![Netlify Status](https://api.netlify.com/api/v1/badges/7e52dbac-aec4-4a56-864f-e33649fadc9b/deploy-status)](https://app.netlify.com/sites/gatsby-tailwind-motion/deploys)

Gatsby + Tailwind + Framer Motion powered boilerplate

[https://gatsby-tailwind-motion.netlify.com](https://gatsby-tailwind-motion.netlify.com)

## πŸš€ Quick start

1. **Clone the repo**

```sh
git clone https://github.com/samuelgoddard/gatsby-tailwind-motion
```

1. **Start developing.**

Navigate into your new site’s directory and install the local dependencies.

```sh
yarn
```

Start developing locally (with gatsby-cli).

```sh
cd gatsby-tailwind-motion/
gatsby develop
```

1. **Open the source code and start editing!**

Your site is now running at `http://localhost:8000`!

_Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql)._

## πŸ“„ Docs

- [Gatsby](https://www.gatsbyjs.org/docs/)
- [TailwindCSS](https://tailwindcss.com/)
- [Framer Motion](https://www.framer.com/motion/)
- [PostCSS](https://postcss.org/)