A Gatsby Starter with Tailwind CSS + Emotion Js

  • By Muhammad Muhajir
  • Last update: Feb 6, 2022
  • Comments: 1

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!

Github

https://github.com/muhajirframe/gatsby-tailwind-emotion-starter

Comments(1)

  • 1

    Configure Renovate

    Mend Renovate

    Welcome to Renovate! This is an onboarding PR to help you understand and configure settings before regular Pull Requests begin.

    🚦 To activate Renovate, merge this Pull Request. To disable Renovate, simply close this Pull Request unmerged.

    Detected Package Files

    • package.json (npm)

    Configuration

    🔡 Renovate has detected a custom config for this PR. Feel free to ask for help if you have any doubts and would like it reviewed.

    Important: Now that this branch is edited, Renovate can't rebase it from the base branch any more. If you make changes to the base branch that could impact this onboarding PR, please merge them manually.

    What to Expect

    With your current configuration, Renovate will create 11 Pull Requests:

    Update dependency tailwindcss to ^0.7.0
    • Schedule: ["at any time"]
    • Branch name: renovate/tailwindcss-0.x
    • Merge into: master
    • Upgrade tailwindcss to ^0.7.0
    Update dependency eslint-config-airbnb to v19
    • Schedule: ["at any time"]
    • Branch name: renovate/eslint-config-airbnb-19.x
    • Merge into: master
    • Upgrade eslint-config-airbnb to ^19.0.0
    Update dependency eslint-config-prettier to v8
    • Schedule: ["at any time"]
    • Branch name: renovate/eslint-config-prettier-8.x
    • Merge into: master
    • Upgrade eslint-config-prettier to ^8.0.0
    Update dependency eslint-plugin-prettier to v4
    • Schedule: ["at any time"]
    • Branch name: renovate/eslint-plugin-prettier-4.x
    • Merge into: master
    • Upgrade eslint-plugin-prettier to ^4.0.0
    Update dependency prettier to v2
    • Schedule: ["at any time"]
    • Branch name: renovate/prettier-2.x
    • Merge into: master
    • Upgrade prettier to ^2.0.0
    Update dependency react-emotion to v10
    • Schedule: ["at any time"]
    • Branch name: renovate/react-emotion-10.x
    • Merge into: master
    • Upgrade react-emotion to ^10.0.0
    Update dependency react-helmet to v6
    • Schedule: ["at any time"]
    • Branch name: renovate/react-helmet-6.x
    • Merge into: master
    • Upgrade react-helmet to ^6.0.0
    Update dependency tailwindcss to v3
    • Schedule: ["at any time"]
    • Branch name: renovate/tailwindcss-3.x
    • Merge into: master
    • Upgrade tailwindcss to ^3.0.0
    Update emotion monorepo to v11 (major)
    • Schedule: ["at any time"]
    • Branch name: renovate/major-emotion-monorepo
    • Merge into: master
    • Upgrade emotion to ^11.0.0
    • Upgrade emotion-server to ^11.0.0
    Update gatsby monorepo (major)
    Update react monorepo to v18 (major)
    • Schedule: ["at any time"]
    • Branch name: renovate/major-react-monorepo
    • Merge into: master
    • Upgrade react to ^18.0.0
    • Upgrade react-dom to ^18.0.0

    🚸 Branch creation will be limited to maximum 2 per hour, so it doesn't swamp any CI resources or spam the project. See docs for prhourlylimit for details.

    ❓ Got questions? Check out Renovate's Docs, particularly the Getting Started section. If you need any further assistance then you can also request help here.

    This PR has been generated by Mend Renovate. View repository job log here.

Popular Tag

Related