Projects
ProjectsBlogContact

Gatsby Typescript Tailwind CSS Starter Kit

boilerplate
2020
Gatsby
Tailwind CSS
Emotion
RepositoryWebsite

TypeScript Gatsby and Tailwind CSS (using emotion) starter kit. Tailwind CSS is a CSS framework that provides basic utilities for building custom designs. This Gatsby.js boilerplate comes with Tailwind CSS support by using twin.macro and emotion to handle underlying css-in-js.

  • Typical Gatsby bootstraped features like Prettier & ESLint

  • TypeScript

  • Aliased imports ~/components -> ./src/components

  • Automatically generated TypeScript types for your GraphQL queries available at ./gatsby-graphql.ts.

  • Build components utilizing Tailwind CSS class names via twin.macro and powered by emotion CSS-in-JS. You can use css prop

    import React from "react";
    import tw from "twin.macro"; // imported function
    const SomeComponent: React.FC = ({children }) => {
    // we are using emotion css pragma with `tw` here
    return <div css={tw`container py-3`}>{children}</div>
    }

    or

    You can use the custom provided tw pragma prop but you will need to add an import

    import React from "react";
    import "twin.macro";
    const SomeComponent: React.FC = ({children }) => {
    // we are using special pragma `tw` here
    return <div tw="container py-3">{children}</div>
    }
Previous project

Current Personal Site

© 2022 Evans Stepanov
GithubTwitterLinkedInAngellistStack Overflow