jaeyholic / gatsby-tailwind-styled-components-starter

A Gatsby Starter with Tailwind CSS + Styled Components

Gatsby Tailwind Styled Components 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/muhajirframe/gatsby-tailwind-styled-components-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 'styled-components'

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 + Styled Components</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 Styled Components, 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

• Github
• Got a question? Submit an issue

Contributing

• Submit an idea
• Make a pull request

Related

• react-tailwind-emotion-starter A React + Tailwind + EmotionJs starter based on create-react-app
• vscode-tailwind-styled-snippets
• gatsby-plugin-tailwindcss

Enjoy!