ben-rogerson · April 18, 2020 06:50 · Apr 18, 2020 · Apr 18, 2020 · Apr 18, 2020 · Apr 18, 2020
diff --git a/twin-styled-components-recipe.mdx b/twin-styled-components-recipe.mdx
@@ -39,7 +39,7 @@ That's it, now it's ready to go!
 
 We'll also create an example page to play with Twin and Styled Components.
 
-<File path="src/pages/twin-example.js" content="https://gist.github.com/ben-rogerson/6ab25a7ed7928fa5f18d63dc138c25e7/raw/22aeb702fdc0af136ff687841fc391e5cec5e0e0/twin-styled-components-example.js" />
+<File path="src/pages/twin-sc-example.js" content="https://gist.github.com/ben-rogerson/6ab25a7ed7928fa5f18d63dc138c25e7/raw/22aeb702fdc0af136ff687841fc391e5cec5e0e0/twin-styled-components-example.js" />
 
 ---
 

diff --git a/twin-emotion-recipe.mdx b/twin-emotion-recipe.mdx
@@ -6,6 +6,15 @@
 
 ---
 
+Install the necessary NPM packages
+
+<NPMPackage name="twin.macro" />
+<NPMPackage name="gatsby-plugin-emotion" />
+<NPMPackage name="@emotion/core" />
+<NPMPackage name="@emotion/styled" />
+
+---
+
 Install the Emotion plugin in gatsby-config.js
 
 <GatsbyPlugin name="gatsby-plugin-emotion" />
@@ -21,15 +30,6 @@ Import the Tailwind base styles using Gatsby browser
 
 ---
 
-Install the necessary NPM packages
-
-<NPMPackage name="twin.macro" />
-<NPMPackage name="gatsby-plugin-emotion" />
-<NPMPackage name="@emotion/core" />
-<NPMPackage name="@emotion/styled" />
-
----
-
 That's it, now it's ready to go!
 
 We'll also create an example page to play with Twin and Emotion.

diff --git a/twin-styled-components-recipe.mdx b/twin-styled-components-recipe.mdx
@@ -6,6 +6,14 @@
 
 ---
 
+Install the NPM packages
+
+<NPMPackage name="twin.macro" />
+<NPMPackage name="gatsby-plugin-styled-components" />
+<NPMPackage name="styled-components" />
+
+---
+
 Install the Styled Components plugin in gatsby-config.js
 
 <GatsbyPlugin name="gatsby-plugin-styled-components" />
@@ -27,14 +35,6 @@ Configure Twin to use Styled Components
 
 ---
 
-Install the NPM packages
-
-<NPMPackage name="twin.macro" />
-<NPMPackage name="gatsby-plugin-styled-components" />
-<NPMPackage name="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.

diff --git a/twin-emotion-recipe.mdx b/twin-emotion-recipe.mdx
@@ -6,15 +6,6 @@
 
 ---
 
-Install the necessary NPM packages
-
-<NPMPackage name="twin.macro" />
-<NPMPackage name="gatsby-plugin-emotion" />
-<NPMPackage name="@emotion/core" />
-<NPMPackage name="@emotion/styled" />
-
----
-
 Install the Emotion plugin in gatsby-config.js
 
 <GatsbyPlugin name="gatsby-plugin-emotion" />
@@ -30,6 +21,15 @@ Import the Tailwind base styles using Gatsby browser
 
 ---
 
+Install the necessary NPM packages
+
+<NPMPackage name="twin.macro" />
+<NPMPackage name="gatsby-plugin-emotion" />
+<NPMPackage name="@emotion/core" />
+<NPMPackage name="@emotion/styled" />
+
+---
+
 That's it, now it's ready to go!
 
 We'll also create an example page to play with Twin and Emotion.

diff --git a/twin-styled-components-recipe.mdx b/twin-styled-components-recipe.mdx
@@ -6,14 +6,6 @@
 
 ---
 
-Install the necessary NPM packages
-
-<NPMPackage name="twin.macro" />
-<NPMPackage name="gatsby-plugin-styled-components" />
-<NPMPackage name="styled-components" />
-
----
-
 Install the Styled Components plugin in gatsby-config.js
 
 <GatsbyPlugin name="gatsby-plugin-styled-components" />
@@ -35,6 +27,14 @@ Configure Twin to use Styled Components
 
 ---
 
+Install the NPM packages
+
+<NPMPackage name="twin.macro" />
+<NPMPackage name="gatsby-plugin-styled-components" />
+<NPMPackage name="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.

diff --git a/twin-styled-components-recipe.mdx b/twin-styled-components-recipe.mdx
@@ -31,7 +31,7 @@ Import the Tailwind base styles using Gatsby browser
 
 Configure Twin to use Styled Components
 
-<File path="package.json" content="https://gist.github.com/ben-rogerson/6ab25a7ed7928fa5f18d63dc138c25e7/raw/a5fa0bc8bb7330c247858c9f2918a202ab0ac4db/package.json" />
+<File path="babel-plugin-macros.config.js" content="https://gist.github.com/ben-rogerson/6ab25a7ed7928fa5f18d63dc138c25e7/raw/a658a82b3ab99636f1679ee71598d7b42d471787/babel-plugin-macros.config.js" />
 
 ---
 

diff --git a/babel-plugin-macros.config.js b/babel-plugin-macros.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  twin: {
+    styled: 'styled-components'
+  }
+}
diff --git a/package.json b/package.json
@@ -1,7 +0,0 @@
-{
-  "babelMacros": {
-    "twin": {
-      "styled": "styled-components"
-    }
-  }
-}

diff --git a/twin-styled-components-recipe.mdx b/twin-styled-components-recipe.mdx
@@ -20,11 +20,11 @@ Install the Styled Components plugin in gatsby-config.js
 
 ---
 
-Import the Tailwind base styles
+Import the Tailwind base styles using Gatsby browser
 
 <File
   path="gatsby-browser.js"
-  content="https://gist.github.com/ben-rogerson/6ab25a7ed7928fa5f18d63dc138c25e7/raw/f1852a2805a052b6846777160e5c22f1677f51a6/gatsby-browser.js"
+  content="https://gist.github.com/ben-rogerson/6ab25a7ed7928fa5f18d63dc138c25e7/raw/c182a3cffcab121fc34a936b7acc29c462e0acda/gatsby-browser.js"
 />
 
 ---

diff --git a/twin-styled-components-recipe.mdx b/twin-styled-components-recipe.mdx
@@ -24,7 +24,7 @@ Import the Tailwind base styles
 
 <File
   path="gatsby-browser.js"
-  content="https://gist.github.com/ben-rogerson/a275fd650f6b1789a7cbe57d92767cf3/raw/e69885563b819f260d3575a8eedccf329cb77a8d/gatsby-browser.js"
+  content="https://gist.github.com/ben-rogerson/6ab25a7ed7928fa5f18d63dc138c25e7/raw/f1852a2805a052b6846777160e5c22f1677f51a6/gatsby-browser.js"
 />
 
 ---

diff --git a/twin-styled-components-recipe.mdx b/twin-styled-components-recipe.mdx
@@ -39,7 +39,7 @@ That's it, now it's ready to go!
 
 We'll also create an example page to play with Twin and Styled Components.
 
-<File path="src/pages/twin-example.js" content="" />
+<File path="src/pages/twin-example.js" content="https://gist.github.com/ben-rogerson/6ab25a7ed7928fa5f18d63dc138c25e7/raw/22aeb702fdc0af136ff687841fc391e5cec5e0e0/twin-styled-components-example.js" />
 
 ---
 

diff --git a/twin-styled-components-example.js b/twin-styled-components-example.js
@@ -0,0 +1,71 @@
+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
diff --git a/twin-styled-components-recipe.mdx b/twin-styled-components-recipe.mdx
@@ -14,7 +14,7 @@ Install the necessary NPM packages
 
 ---
 
-Install the Emotion plugin in gatsby-config.js
+Install the Styled Components plugin in gatsby-config.js
 
 <GatsbyPlugin name="gatsby-plugin-styled-components" />
 
@@ -29,7 +29,7 @@ Import the Tailwind base styles
 
 ---
 
-Configure twin to use styled components
+Configure Twin to use Styled Components
 
 <File path="package.json" content="https://gist.github.com/ben-rogerson/6ab25a7ed7928fa5f18d63dc138c25e7/raw/a5fa0bc8bb7330c247858c9f2918a202ab0ac4db/package.json" />
 

diff --git a/twin-styled-components-recipe.mdx b/twin-styled-components-recipe.mdx
@@ -31,7 +31,7 @@ Import the Tailwind base styles
 
 Configure twin to use styled components
 
-<File path="package.json" content="" />
+<File path="package.json" content="https://gist.github.com/ben-rogerson/6ab25a7ed7928fa5f18d63dc138c25e7/raw/a5fa0bc8bb7330c247858c9f2918a202ab0ac4db/package.json" />
 
 ---
 

diff --git a/package.json b/package.json
@@ -0,0 +1,7 @@
+{
+  "babelMacros": {
+    "twin": {
+      "styled": "styled-components"
+    }
+  }
+}
diff --git a/twin-emotion-recipe.mdx b/twin-emotion-recipe.mdx
@@ -1,8 +1,8 @@
 # Setup Gatsby with 🦹‍♂️ Twin + 👩‍🎤 Emotion
 
-[Twin](https://github.com/ben-rogerson/twin.macro) lets you use Tailwind classes within any CSS-in-JS library.
+[🦹‍♂️ Twin](https://github.com/ben-rogerson/twin.macro) lets you use Tailwind classes within any CSS-in-JS library.
 
-[Emotion](https://emotion.sh/) 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.
+[👩‍🎤 Emotion](https://emotion.sh/) 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.
 
 ---
 

diff --git a/twin-styled-components-recipe.mdx b/twin-styled-components-recipe.mdx
@@ -0,0 +1,48 @@
+# Setup Gatsby with 🦹‍♂️ Twin + 💅 Styled Components
+
+[🦹‍♂️ Twin](https://github.com/ben-rogerson/twin.macro) lets you use Tailwind classes within any CSS-in-JS library.
+
+[💅 Styled Components](https://styled-components.com/) are visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress.
+
+---
+
+Install the necessary NPM packages
+
+<NPMPackage name="twin.macro" />
+<NPMPackage name="gatsby-plugin-styled-components" />
+<NPMPackage name="styled-components" />
+
+---
+
+Install the Emotion plugin in gatsby-config.js
+
+<GatsbyPlugin name="gatsby-plugin-styled-components" />
+
+---
+
+Import the Tailwind base styles
+
+<File
+  path="gatsby-browser.js"
+  content="https://gist.github.com/ben-rogerson/a275fd650f6b1789a7cbe57d92767cf3/raw/e69885563b819f260d3575a8eedccf329cb77a8d/gatsby-browser.js"
+/>
+
+---
+
+Configure twin to use styled components
+
+<File path="package.json" content="" />
+
+---
+
+That's it, now it's ready to go!
+
+We'll also create an example page to play with Twin and Styled Components.
+
+<File path="src/pages/twin-example.js" content="" />
+
+---
+
+Read more about Twin in the repo readme:
+
+https://github.com/ben-rogerson/twin.macro
diff --git a/twin-emotion-recipe.mdx b/twin-emotion-recipe.mdx
@@ -21,11 +21,11 @@ Install the Emotion plugin in gatsby-config.js
 
 ---
 
-Import the Tailwind base styles
+Import the Tailwind base styles using Gatsby browser
 
 <File
   path="gatsby-browser.js"
-  content="https://gist.github.com/ben-rogerson/a275fd650f6b1789a7cbe57d92767cf3/raw/e69885563b819f260d3575a8eedccf329cb77a8d/gatsby-browser.js"
+  content="https://gist.github.com/ben-rogerson/6ab25a7ed7928fa5f18d63dc138c25e7/raw/c182a3cffcab121fc34a936b7acc29c462e0acda/gatsby-browser.js"
 />
 
 ---
@@ -35,8 +35,8 @@ That's it, now it's ready to go!
 We'll also create an example page to play with Twin and Emotion.
 
 <File
-  path="src/pages/twin-example.js"
-  content="https://gist.github.com/ben-rogerson/a275fd650f6b1789a7cbe57d92767cf3/raw/fc1253a2f0fdd0eb7d6573e060273e4767966c78/twin-example.js"
+  path="src/pages/twin-emotion-example.js"
+  content="https://gist.github.com/ben-rogerson/6ab25a7ed7928fa5f18d63dc138c25e7/raw/c182a3cffcab121fc34a936b7acc29c462e0acda/twin-emotion-example.js"
 />
 
 ---

diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -0,0 +1 @@
+import 'tailwindcss/dist/base.css'
diff --git a/twin-emotion-example.js b/twin-emotion-example.js
@@ -0,0 +1,72 @@
+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
diff --git a/twin-emotion-recipe.mdx b/twin-emotion-recipe.mdx
@@ -0,0 +1,46 @@
+# Setup Gatsby with 🦹‍♂️ Twin + 👩‍🎤 Emotion
+
+[Twin](https://github.com/ben-rogerson/twin.macro) lets you use Tailwind classes within any CSS-in-JS library.
+
+[Emotion](https://emotion.sh/) 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
+
+<NPMPackage name="twin.macro" />
+<NPMPackage name="gatsby-plugin-emotion" />
+<NPMPackage name="@emotion/core" />
+<NPMPackage name="@emotion/styled" />
+
+---
+
+Install the Emotion plugin in gatsby-config.js
+
+<GatsbyPlugin name="gatsby-plugin-emotion" />
+
+---
+
+Import the Tailwind base styles
+
+<File
+  path="gatsby-browser.js"
+  content="https://gist.github.com/ben-rogerson/a275fd650f6b1789a7cbe57d92767cf3/raw/e69885563b819f260d3575a8eedccf329cb77a8d/gatsby-browser.js"
+/>
+
+---
+
+That's it, now it's ready to go!
+
+We'll also create an example page to play with Twin and Emotion.
+
+<File
+  path="src/pages/twin-example.js"
+  content="https://gist.github.com/ben-rogerson/a275fd650f6b1789a7cbe57d92767cf3/raw/fc1253a2f0fdd0eb7d6573e060273e4767966c78/twin-example.js"
+/>
+
+---
+
+Read more about Twin in the repo readme:
+
+https://github.com/ben-rogerson/twin.macro
No results found