Git Product home page Git Product logo

Gatsby + Tailwind w/Emotion

This demo is a quick example of combining Tailwind CSS with Emotion in a Gatsby site.

Check the inspector to see loaded CSS in the demo.

Quickstart

# Clone the repo
git clone [email protected]:jlengstorf/gatsby-tailwind-demo.git
cd gatsby-tailwind-demo/

# Install dependencies
yarn

# Start the app in development mode
yarn develop

Make sure to use the right build command in your build settings e.g. if you use Netlify! Per default Netlify sets it to gatsby build but you have to use yarn run build to run postcss before building the Gatsby site.

Why does this exist?

CSS frameworks tend to generate large files, and it’s rare that a given page uses all of them. With CSS-in-JS solutions like Emotion, only the styles actually being used are attached to each component, which decreases the amount of style data sent for each page in a given app.

Thanks to @bradlc’s work on babel-plugin-tailwind-components, we can easily get the power of Tailwind without the stylesheet bloat by passing Tailwind classes into Emotion.

This repo contains two distinct approaches: styled components and the css() function.

Styled Components

Live demo

With styled components, we can add Tailwind classes directly to a React component like so:

/* global tw */
import React from 'react';
import styled from 'react-emotion';

const Heading = styled('h1')`
  ${tw`my-0 text-xl leading-tight`};
`;

export default () => <Heading>This is some text!</Heading>;

To see the CSS approach in this demo, start the app with yarn develop, then navigate to http://localhost:8000.

NOTE: The Babel plugin will automatically process the tw() function, which means we don’t actually need to import it. ESLint will complain about this, however, so we need to add tw as a global variable.

CSS Function

Live Demo

Using Emotion’s css function, we would do something like this:

/* global tw */
import React from 'react';
import { css } from 'emotion';

const heading = css(tw`my-0 text-xl leading-tight`);

export default () => <h1 className={heading}>This is some text!</h1>;

To see the CSS approach in this demo, start the app with yarn develop, then navigate to http://localhost:8000/css.

Both approaches produce the same output — ultimately it comes down to your preference.

Only the Styles We Need Are Included

If we inspect the page, we can see that only the styles for each given Tailwind class used by our component have been included. This means that we're able to use Tailwind without any concerns about stylesheet bloat over time.

Emmanuel's Projects

100-days-of-code icon 100-days-of-code

Fork this template for the 100 days journal - to keep yourself accountable

alumnus icon alumnus

A Next.js powered platform for alumni

awesome-serverless icon awesome-serverless

:cloud: A curated list of awesome services, solutions and resources for serverless / nobackend applications.

baseui icon baseui

A React Component library implementing the Base design language

botpress icon botpress

The leading open-source conversational bot platform

bs-blabla icon bs-blabla

BuckleScript `[@bs.blabla]` attributes explained with examples

chantons icon chantons

Chatons avec Espérance est une application pour les chrétiens et chrétiennes d'Haiti où ils peuvent entendre et partager des chants du receuil des chants d'espérance

codingcamp icon codingcamp

Curriculum pour un camp d'été sur la progammation. Par des jeunes pour des jeunes

data-science-interview-resources icon data-science-interview-resources

A repository listing out the potential sources which will help you in preparing for a Data Science/Machine Learning interview. New resources added frequently.

deep-learning-for-hackers icon deep-learning-for-hackers

Machine Learning tutorials with TensorFlow 2 and Keras in Python (Jupyter notebooks included) - (LSTMs, Hyperameter tuning, Data preprocessing, Bias-variance tradeoff, Anomaly Detection, Autoencoders, Time Series Forecasting, Object Detection, Sentiment Analysis, Intent Recognition with BERT)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.