(examples/with-tailwind-emotion-twin-macro): add new example

examples/with-tailwindcss-emotion-twin-macro/.babelrc

@@ -0,0 +1,18 @@
+{
+  "presets": [
+    [
+      "next/babel",
+      {
+        "preset-react": {
+          "runtime": "automatic",
+          "importSource": "@emotion/react"
+        }
+      }
+    ]
+  ],
+  "plugins": [
+    "@emotion/babel-plugin",
+    "babel-plugin-twin",
+    "babel-plugin-macros"
+  ]
+}

examples/with-tailwindcss-emotion-twin-macro/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

examples/with-tailwindcss-emotion-twin-macro/README.md

@@ -0,0 +1,33 @@
+# Tailwind CSS with Emotion.js and twin.macro example
+
+This is an example of how you can add [Tailwind CSS](https://tailwindcss.com/) with [Emotion.js](https://emotion.sh/docs/introduction) in your web app. It takes inspiration from [examples/with-tailwindcss](https://github.com/vercel/next.js/blob/canary/examples/with-tailwindcss/README.md).
+
+`twin.macro` is used to apply Tailwind styles inside Emotion. No need to use CSS files, autoprefix, minifier, etc. You will get the full benefits of Emotion.
+
+> It’s important to know that you don’t need a tailwind.config.js to use Twin. You already have access to every class with every variant. Unlike Tailwind, twin.macro only generates styles for the classes so you don’t need to use PurgeCSS.
+
+[Source](https://github.com/ben-rogerson/twin.macro/blob/master/docs/customizing-config.md)
+
+## Preview
+
+Preview the example live on [StackBlitz](http://stackblitz.com/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-tailwindcss-emotion-twin-macro)
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss-emotion-twin-macro&project-name=with-tailwindcss-emotion-twin-macro&repository-name=with-tailwindcss-emotion-twin-macro)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-tailwindcss-emotion-twin-macro with-tailwindcss-emotion-app
+# or
+yarn create next-app --example with-tailwindcss-emotion-twin-macro with-tailwindcss-emotion-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/with-tailwindcss-emotion-twin-macro/components/Button.js

@@ -0,0 +1,12 @@
+import tw, { styled } from 'twin.macro'
+
+const Button = styled.button(({ variant }) => [
+  tw`px-4 py-2 transform duration-200 rounded bg-black text-white font-medium border-2 border-transparent whitespace-nowrap`,
+  tw`focus:(outline-none ring-2 ring-pink-500 ring-opacity-50)`,
+  tw`hover:(scale-[1.02] shadow-lg)`,
+  tw`active:scale-100`,
+  variant === 'hollow' &&
+    tw`bg-white text-black border-current border-opacity-50`,
+])
+
+export default Button

examples/with-tailwindcss-emotion-twin-macro/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "with-tailwindcss-emotion-twin-macro",
+  "version": "1.0.0",
+  "license": "MIT",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@emotion/styled": "^11.3.0",
+    "@emotion/react": "^11.4.0",
+    "next": "latest",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.14.6",
+    "@emotion/babel-preset-css-prop": "^11.2.0",
+    "babel-plugin-twin": "1.0.2",
+    "tailwindcss": "^2.2.4",
+    "twin.macro": "^2.5.0"
+  },
+  "babelMacros": {
+    "twin": {
+      "preset": "emotion"
+    }
+  }
+}

examples/with-tailwindcss-emotion-twin-macro/pages/_app.js

@@ -0,0 +1,10 @@
+import { GlobalStyles } from 'twin.macro'
+
+export default function App({ Component, pageProps }) {
+  return (
+    <>
+      <GlobalStyles />
+      <Component {...pageProps} />
+    </>
+  )
+}

examples/with-tailwindcss-emotion-twin-macro/pages/index.js

@@ -0,0 +1,19 @@
+import Button from '../components/Button'
+
+export default function Index() {
+  return (
+    <main tw="max-w-2xl mx-auto px-4 min-h-[100vh] flex flex-col justify-center items-center">
+      <h1 tw="mb-2 md:mb-4 text-2xl md:text-3xl font-bold">
+        Tailwind CSS with Emotion.js
+      </h1>
+      <p>
+        This example uses <code>twin.macro</code> and{' '}
+        <code>babel-plugin-twin</code>.<br />
+      </p>
+      <p tw="flex flex-wrap items-center justify-center gap-2 mt-8">
+        <Button>Just a Button</Button>
+        <Button variant="hollow">Hollow Button</Button>
+      </p>
+    </main>
+  )
+}

examples/with-tailwindcss-emotion-twin-macro/tailwind.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}