Skip to content
A Gatsby Starter with Tailwind CSS + Emotion Js
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src update content on index.js Oct 5, 2018
.eslintrc
.gitignore
.prettierrc
LICENSE
README.md
gatsby-browser.js initial commit Oct 5, 2018
gatsby-config.js
gatsby-node.js initial commit Oct 5, 2018
gatsby-ssr.js initial commit Oct 5, 2018
package-lock.json fix package-lock.json Oct 5, 2018
package.json
tailwind.js initial commit Oct 5, 2018

README.md

Gatsby Tailwind Emotion Starter

Getting Started

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

Usage

Develop

npm run develop

Build

npm run build

Your built file will be in /public

This project was based on gatsby-plugin-tailwindcss

How the heck do I use it?

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

Why would I use it?

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

For more information

Contributing

Related

Enjoy!

You can’t perform that action at this time.