Gatsby Emotion Tailwind Starter
A starter template to create a lightening-fast static website. Comes pre-built with Gatsby, Emotion, and Tailwind to get you up and running quickly. Inspired by the gatsby-starter-blog
Demo hosted on Netlify.
Features
- React static generator GatsbyJS v2
- CSS-in-JS library Emotion for your styled components
- CSS utility framework Tailwind CSS to quickly add style
- Offline Support
- Progressive Web App
- Lazy loading images with webp support
- Auto-Generated sitemap
- Google Analytics
Getting started
# download the template zip via dropdown or
git clone https://github.com/chrismwilliams/gatsby-emotion-tailwind-starter.git
Start developing
Navigate into template directory
# install dependencies
yarn install
# development with hot re-load
yarn dev
# build for production
yarn build
Using Emotion & Tailwind
With the CSS utility library Tailwind you can quickly add styles and responsive design, all without having to write any css. Emotion allows you to name and style elements within your js files.
/*
import tw from 'twin.macro';
import styled from '@emotion/styled';
** Creating a styled div, centering children via flex-box **
*/
const StyledDiv = styled.div`
${tw`flex justify-center items-center`}
`
const AltStyledDiv = tw.div`flex justify-center items-center`
return (
<>
<StyledDiv>
<p>I'm centred</p>
<p>Me too!</p>
</StyledDiv>
<AltStyledDiv>
<p>Same here</p>
</AltStyledDiv>
</>
);
The tailwind docs are a great resource to get you started. The starter uses twin.macro which also has some additional helpful utilities.
Customisation
-
Tailwind config. Open up the
tailwind.config.js
file to set your own project preferences & requirements, such as break-points, colours, and fonts. -
A layout component (
src/components/elements/layout.js
) is used for setting a standardised default layout. -
This template uses the plugin typefaces to optimise font delivery. Changing font(s) simply requires installing your favourite typeface-font and importing into
gatsby-browser.js
. Remember to add your font(s) intotailwind.config.js
, either the fonts sans/serif array, in order to use it with tailwind utilities. -
SEO component, taken from gatsby-starter-blog, allowing you to add your SEO descriptions & title's.
-
Favicon. Auto-generated from gatsby-plugin-manifest set in
gatsby-config.js
. Replace the current favicon (src/images/icon/logo.png
) with your own 512x512 icon -
Analytics. Add your google analytics id via an .env file
GOOGLE_ANALYTICS
to get started.
Website Built using this theme
-Mac
-AWS