Use the Gatsby CLI to create a new site, specifying the Lumen starter.

gatsby new my-new-website https://github.com/burnsy/gatsby-typescript-tailwind-emotion-starter

Navigate into your new site’s directory and start it up.

cd my-new-website
gatsby develop

npm run develop

npm run build

Your built file will be in /public

import React from 'react'
import tw from 'tailwind.macro';
import styled from '@emotion/styled';

// like this 
const Container = styled.div`
  ${tw`py-8`};
`
// or this
const Text = styled.p(tw`bg-black text-white`);

const Home: FC = () => (
  <Container>
    <Text>
    I am Text component made with Tailwind CSS + EmotionJS + Typescript
    </Text>
  </Container>
)

export default Home

Becuase you would like to use Tailwind CSS with Typescript & JS-IN-CSS. You know how awesome it utility first CSS.

Compared to CSS framework like Bootstrap, Tailwind CSS gives you alot of class as utilities. The file size gets bloated. In fact it's 1.5 times bigger than Bootstrap. (https://tailwindcss.com/docs/controlling-file-size )

CSS-in-JS to save.

Fortunately, you can use CSS-in-JS like Emotion, to only load needed styles. So you can keep you css size small.

Furthremore, CSS-in-JS is just awesome. CSS in JS: Benefits, Drawbacks, and Tooling

Why Gatsby? Because Gatsby is blazing fast, and comes with alot of plugins

• Github
• gatsby-typescript-tailwind-emotion-starter
• Got a question? Submit an issue

• Submit an idea
• Make a pull request

This template was built of and is an updated version of react-tailwind-emotion-starter. Thanks you to muhajirdev.

Enjoy!