Best of both worlds Tailwind with Emotion 🤷♂️
- Install dependencies
npm i twin.macro @emotion/core gatsby-plugin-emotion
- Create a
gatsby-browser.js
file and import tailwind's base stylesimport "tailwindcss/dist/base.css"
- Edit your
gatsby-config.js
module.exports = { plugins: ["gatsby-plugin-emotion"], }
- Run
gatsby develop
pages/index.js
import React from "react"
import tw from "twin.macro"
import Button from "../components/button"
export default () => (
<main tw="max-w-4xl mx-auto">
<div tw="flex items-center justify-center h-screen">
<div tw="grid grid-cols-4 gap-4">
<Button>Click me</Button>
<Button primary>Click me</Button>
<Button secondary>Click me</Button>
<Button gradient>Click me</Button>
</div>
</div>
</main>
)
components/button.js
import React from "react"
import tw from "twin.macro"
import { css } from "@emotion/core"
const Button = ({ children, primary, secondary, gradient, ...props }) => {
return (
<button
{...props}
css={[
tw`px-3 py-2 text-base rounded-md bg-gray-500 text-white`,
primary && tw`bg-blue-500`,
secondary && tw`bg-green-500`,
gradient &&
css`
background: linear-gradient(19deg, #21d4fd 0%, #b721ff 100%);
`,
]}
>
{children}
</button>
)
}
export default Button
An alternative version with plain CSS can be found here.
Read more about Twin here.