Skip to content

Instantly share code, notes, and snippets.

@ben-rogerson

ben-rogerson/babel-plugin-macros.config.js

Last active April 18, 2020 06:50
Show Gist options
  • Save ben-rogerson/6ab25a7ed7928fa5f18d63dc138c25e7 to your computer and use it in GitHub Desktop.
Save ben-rogerson/6ab25a7ed7928fa5f18d63dc138c25e7 to your computer and use it in GitHub Desktop.
Download ZIP
Gatsby recipe > Twin + Emotion
Raw
babel-plugin-macros.config.js
module.exports = {
twin: {
styled: 'styled-components'
}
}
Raw
gatsby-browser.js
import 'tailwindcss/dist/base.css'
Raw
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
Raw
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

Raw
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
Raw
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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment