- Yarn 2.x (berry)
- Typescript! Graphql!
- Tailwind
- SASS/SCSS
- Tailwind -> SASS vars
- Gatsby / React
- Linting! w/ ESLint & Prettier
- Jest
- Sane Defaults
yarn install
yarn dev
Replace src/assets/images/social-image.jpg
If you change the name or format, update useSocialImageQuery in src/hooks
Use config/SiteConfig.js and/or .env/ENV vars
Tailwind doesn't like the existing tools and fine-tunes each value. If you'd still like to use a builder, we recommend Material Design Color Generator by @mbitson (view on GitHub for the finer details).
- Select a color
- Click the clipboard icon towards the top-right of the color card
- Select "Material UI Next (React)"
- Copy lines 3-12 (and optionally, 13-17) into the "colors" section of tailwind.config.js
- Restart Gatsby and enjoy your new hue!
Update the googleFonts
section in config/SiteConfig.js.
The starter is already set up for Google Fonts. We use gatsby-plugin-google-fonts-v2, which has support for variable fonts.
Make sure to add your new font to the fontFamily
section of tailwind.config.js!
Replace favicon.svg with your own SVG data, or update the icon
path in the manifestOptions
of config/SiteConfig.js