Gatsby recipe > Twin + Emotion

babel-plugin-macros.config.js

module.exports = {
  twin: {
    styled: 'styled-components'
  }
}

gatsby-browser.js

import 'tailwindcss/dist/base.css'

twin-emotion-example.js

import React from 'react'
import tw from 'twin.macro'
import styled from '@emotion/styled/macro'
import { css } from '@emotion/core'

// ==============

const Button = styled.button(
  ({ isPrimary, isSecondary, isSmall }) => [
    // The base button styles added with the tw macro
    tw`inline-block text-lg px-8 py-2 rounded
    transform hocus:scale-105 transition-transform duration-75
    hocus:text-yellow-400 focus:outline-none text-white`,

    // Use props to conditionally style your components
    isPrimary && tw`bg-black text-white border-black`,

    // Combine regular css with Tailwind classes within backticks
    isSecondary &&
      css`
        box-shadow: 0 0.1em 0 0 rgba(0, 0, 0, 0.25);
        ${tw`border-2 border-yellow-600`}
      `,

    // Conditional props can be added
    isSmall ? tw`text-sm` : tw`text-lg`,
  ]
)

// ==============

const Logo = () => (
  <a
    // Use the tw prop to add Tailwind styles directly on jsx elements
    tw="w-32 mb-10 p-5 block opacity-50 hover:opacity-100"
    href="https://github.com/ben-rogerson/twin.macro"
    target="_blank"
    rel="noopener noreferrer"
  >
    <svg fill="black" viewBox="0 0 100 35" xmlns="http://www.w3.org/2000/svg">
      <path d="m31.839 11.667c0-6.2223-3.3515-10.111-10.054-11.667 3.3514 2.3333 4.6082 5.0556 3.7704 8.1667-0.4781 1.7751-1.8653 3.0438-3.4009 4.4481-2.5016 2.2877-5.3968 4.9354-5.3968 10.718 0 6.2223 3.3515 10.111 10.054 11.667-3.3515-2.3333-4.6083-5.0556-3.7704-8.1667 0.478-1.775 1.8653-3.0438 3.4009-4.4481 2.5015-2.2877 5.3967-4.9354 5.3967-10.718z" />
      <path d="m-2.7803e-7 11.667c1.4828e-7 -6.2223 3.3515-10.111 10.055-11.667-3.3515 2.3333-4.6083 5.0556-3.7705 8.1667 0.47806 1.7751 1.8653 3.0438 3.4009 4.4481 2.5016 2.2877 5.3968 4.9354 5.3968 10.718 0 6.2223-3.3515 10.111-10.054 11.667 3.3515-2.3333 4.6083-5.0556 3.7704-8.1667-0.47805-1.775-1.8653-3.0438-3.4009-4.4481-2.5015-2.2877-5.3967-4.9354-5.3967-10.718z" />
      <path d="m50.594 15.872h-3.9481v7.6c0 2.0267 1.3373 1.995 3.9481 1.8683v3.0717c-5.2853 0.6333-7.3867-0.8233-7.3867-4.94v-7.6h-2.9292v-3.2933h2.9292v-4.2534l3.4386-1.0133v5.2667h3.9481v3.2933zm21.324-3.2933h3.6297l-4.9988 15.833h-3.3749l-3.3113-10.672-3.3431 10.672h-3.375l-4.9987-15.833h3.6297l3.0884 10.925 3.3431-10.925h3.2794l3.3113 10.925 3.1202-10.925zm7.8961-2.375c-1.2099 0-2.1969-1.0134-2.1969-2.185 0-1.2033 0.987-2.185 2.1969-2.185s2.1969 0.98167 2.1969 2.185c0 1.1717-0.987 2.185-2.1969 2.185zm-1.7193 18.208v-15.833h3.4386v15.833h-3.4386zm15.792-16.245c3.566 0 6.1131 2.4067 6.1131 6.5233v9.7217h-3.4386v-9.3733c0-2.4067-1.401-3.6734-3.566-3.6734-2.2606 0-4.0436 1.33-4.0436 4.56v8.4867h-3.4386v-15.833h3.4386v2.0266c1.0507-1.6466 2.77-2.4383 4.9351-2.4383z" />
    </svg>
  </a>
)

// ==============

const TwinDemoPage = () => (
    <div
      css={[
        tw`h-screen flex flex-col items-center justify-center`,
        // Combine regular css and Tailwind styles within backticks
        css`
          background: linear-gradient(#db00ff, #0047ff);
          * {
            ${tw`mt-6`}
          }
        `
      ]}
    >
      <div tw="flex flex-col justify-center h-full">
        <Button isPrimary>Submit</Button>
        <Button isSecondary>Cancel</Button>
        <Button isSmall>Close</Button>
      </div>
      <Logo />
    </div>
)

export default TwinDemoPage

twin-emotion-recipe.mdx

Setup Gatsby with 🦹‍♂️ Twin + 👩‍🎤 Emotion

🦹‍♂️ Twin lets you use Tailwind classes within any CSS-in-JS library.

👩‍🎤 Emotion is a powerful CSS-in-JS library that supports both inline CSS styles and styled components. You can use each styling feature individually or together in the same file.

---

Install the necessary NPM packages

---

Install the Emotion plugin in gatsby-config.js

---

Import the Tailwind base styles using Gatsby browser

---

That's it, now it's ready to go!

We'll also create an example page to play with Twin and Emotion.

---

Read more about Twin in the repo readme:

https://github.com/ben-rogerson/twin.macro

twin-styled-components-example.js

import React from 'react'
import tw from 'twin.macro'
import styled, { css } from 'styled-components/macro'

// ==============

const Button = styled.button(
  ({ isPrimary, isSecondary, isSmall }) => [
    // The base button styles added with the tw macro
    tw`inline-block text-lg px-8 py-2 rounded
    transform hocus:scale-105 transition-transform duration-75
    hocus:text-yellow-400 focus:outline-none text-white`,

    // Use props to conditionally style your components
    isPrimary && tw`bg-black text-white border-black`,

    // Combine regular css with Tailwind classes within backticks
    isSecondary &&
      css`
        box-shadow: 0 0.1em 0 0 rgba(0, 0, 0, 0.25);
        ${tw`border-2 border-yellow-600`}
      `,

    // Conditional props can be added
    isSmall ? tw`text-sm` : tw`text-lg`,
  ]
)

// ==============

const Logo = () => (
  <a
    // Use the tw prop to add Tailwind styles directly on jsx elements
    tw="w-32 mb-10 p-5 block opacity-50 hover:opacity-100"
    href="https://github.com/ben-rogerson/twin.macro"
    target="_blank"
    rel="noopener noreferrer"
  >
    <svg fill="black" viewBox="0 0 100 35" xmlns="http://www.w3.org/2000/svg">
      <path d="m31.839 11.667c0-6.2223-3.3515-10.111-10.054-11.667 3.3514 2.3333 4.6082 5.0556 3.7704 8.1667-0.4781 1.7751-1.8653 3.0438-3.4009 4.4481-2.5016 2.2877-5.3968 4.9354-5.3968 10.718 0 6.2223 3.3515 10.111 10.054 11.667-3.3515-2.3333-4.6083-5.0556-3.7704-8.1667 0.478-1.775 1.8653-3.0438 3.4009-4.4481 2.5015-2.2877 5.3967-4.9354 5.3967-10.718z" />
      <path d="m-2.7803e-7 11.667c1.4828e-7 -6.2223 3.3515-10.111 10.055-11.667-3.3515 2.3333-4.6083 5.0556-3.7705 8.1667 0.47806 1.7751 1.8653 3.0438 3.4009 4.4481 2.5016 2.2877 5.3968 4.9354 5.3968 10.718 0 6.2223-3.3515 10.111-10.054 11.667 3.3515-2.3333 4.6083-5.0556 3.7704-8.1667-0.47805-1.775-1.8653-3.0438-3.4009-4.4481-2.5015-2.2877-5.3967-4.9354-5.3967-10.718z" />
      <path d="m50.594 15.872h-3.9481v7.6c0 2.0267 1.3373 1.995 3.9481 1.8683v3.0717c-5.2853 0.6333-7.3867-0.8233-7.3867-4.94v-7.6h-2.9292v-3.2933h2.9292v-4.2534l3.4386-1.0133v5.2667h3.9481v3.2933zm21.324-3.2933h3.6297l-4.9988 15.833h-3.3749l-3.3113-10.672-3.3431 10.672h-3.375l-4.9987-15.833h3.6297l3.0884 10.925 3.3431-10.925h3.2794l3.3113 10.925 3.1202-10.925zm7.8961-2.375c-1.2099 0-2.1969-1.0134-2.1969-2.185 0-1.2033 0.987-2.185 2.1969-2.185s2.1969 0.98167 2.1969 2.185c0 1.1717-0.987 2.185-2.1969 2.185zm-1.7193 18.208v-15.833h3.4386v15.833h-3.4386zm15.792-16.245c3.566 0 6.1131 2.4067 6.1131 6.5233v9.7217h-3.4386v-9.3733c0-2.4067-1.401-3.6734-3.566-3.6734-2.2606 0-4.0436 1.33-4.0436 4.56v8.4867h-3.4386v-15.833h3.4386v2.0266c1.0507-1.6466 2.77-2.4383 4.9351-2.4383z" />
    </svg>
  </a>
)

// ==============

const TwinDemoPage = () => (
    <div
      css={[
        tw`h-screen flex flex-col items-center justify-center`,
        // Combine regular css and Tailwind styles within backticks
        css`
          background: linear-gradient(#db00ff, #0047ff);
          * {
            ${tw`mt-6`}
          }
        `
      ]}
    >
      <div tw="flex flex-col justify-center h-full">
        <Button isPrimary>Submit</Button>
        <Button isSecondary>Cancel</Button>
        <Button isSmall>Close</Button>
      </div>
      <Logo />
    </div>
)

export default TwinDemoPage

twin-styled-components-recipe.mdx

Setup Gatsby with 🦹‍♂️ Twin + 💅 Styled Components

🦹‍♂️ Twin lets you use Tailwind classes within any CSS-in-JS library.

💅 Styled Components are visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress.

---

Install the NPM packages

---

Install the Styled Components plugin in gatsby-config.js

---

Import the Tailwind base styles using Gatsby browser

---

Configure Twin to use Styled Components

---

That's it, now it's ready to go!

We'll also create an example page to play with Twin and Styled Components.

---

Read more about Twin in the repo readme:

https://github.com/ben-rogerson/twin.macro