Install Gatsby CLI:
npm install --global gatsby-cli
Create new Gatsby project using this starter:
gatsby new my-new-website https://github.com/muhajirdev/gatsby-tailwind-emotion-starter
cd my-new-website
npm run develop
npm run build
Your built file will be in /public
This project was based on gatsby-plugin-tailwindcss
import React from 'react'
import styled from 'react-emotion'
const Container = styled.div`
${tw`py-8`};
`
const Text = styled.p`
${tw`bg-black text-white`};
`
const Home = () => (
<Container>
<Text>I am Text component made with Tailwind CSS + EmotionJS</Text>
</Container>
)
export default Home
Because Tailwind CSS is awesome. If you used Tachyons before. You know how awesome it utility first CSS. Compared to CSS framework like Bootstrap. -- If you haven't try utility first CSS, give it a try. It's one of the best things in my life --. Tailwind is a more customizable version of Tachyons.
But, because 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-tailwind-emotion-starter
- Got a question? Submit an issue
- Submit an idea
- Make a pull request
- react-tailwind-emotion-starter A React + Tailwind + EmotionJs starter based on create-react-app
- vscode-tailwind-styled-snippets
- gatsby-plugin-tailwindcss
Enjoy!