gatsby-emotion-tailwind-starter v4.2.0

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
• Dark Mode Tailwind CSS variant

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
npm install
# yarn
yarn

# development with hot re-load
npm run dev
# yarn
yarn dev

# build for production
npm run build
# yarn
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`}
`

/*
  ** Or with grid **
*/
const AltStyledDiv = tw.div`grid place-content-center place-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 is a fantastic library, and includes many additional variants.

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/Layout.js) is used for setting a standardised default layout to wrap pages.

• Dark & Light mode. Open up src/components/styled/baseStyles.js and tailwind.config.js to see where/how CSS custom variables are added. You can also use Tailwinds' dark variant within styled components, as shown in src/components/home/styled/card.js with a dark variant, and src/components/styled/socialList.js for a light variant.

• 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