swak / animated-enigma

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, { styled } from 'twin.macro';

  ** 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) into tailwind.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.