From 81489df6236ac282ec7c490513831d96a4ba61a0 Mon Sep 17 00:00:00 2001 From: Pavel Mineev Date: Mon, 14 Jun 2021 11:44:17 +0300 Subject: [PATCH 1/2] examples/with-tailwind-emotion-twin-macro --- .../.babelrc | 18 ++++++++++ .../.gitignore | 34 +++++++++++++++++++ .../README.md | 33 ++++++++++++++++++ .../components/Button.js | 12 +++++++ .../package.json | 29 ++++++++++++++++ .../pages/_app.js | 10 ++++++ .../pages/index.js | 19 +++++++++++ .../tailwind.config.js | 10 ++++++ 8 files changed, 165 insertions(+) create mode 100644 examples/with-tailwindcss-emotion-twin-macro/.babelrc create mode 100644 examples/with-tailwindcss-emotion-twin-macro/.gitignore create mode 100644 examples/with-tailwindcss-emotion-twin-macro/README.md create mode 100644 examples/with-tailwindcss-emotion-twin-macro/components/Button.js create mode 100644 examples/with-tailwindcss-emotion-twin-macro/package.json create mode 100644 examples/with-tailwindcss-emotion-twin-macro/pages/_app.js create mode 100644 examples/with-tailwindcss-emotion-twin-macro/pages/index.js create mode 100644 examples/with-tailwindcss-emotion-twin-macro/tailwind.config.js diff --git a/examples/with-tailwindcss-emotion-twin-macro/.babelrc b/examples/with-tailwindcss-emotion-twin-macro/.babelrc new file mode 100644 index 0000000000000..34f56fe64ac9c --- /dev/null +++ b/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" + ] +} diff --git a/examples/with-tailwindcss-emotion-twin-macro/.gitignore b/examples/with-tailwindcss-emotion-twin-macro/.gitignore new file mode 100644 index 0000000000000..1437c53f70bc2 --- /dev/null +++ b/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 diff --git a/examples/with-tailwindcss-emotion-twin-macro/README.md b/examples/with-tailwindcss-emotion-twin-macro/README.md new file mode 100644 index 0000000000000..55107f2ac5b08 --- /dev/null +++ b/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)). diff --git a/examples/with-tailwindcss-emotion-twin-macro/components/Button.js b/examples/with-tailwindcss-emotion-twin-macro/components/Button.js new file mode 100644 index 0000000000000..1a007e0f19364 --- /dev/null +++ b/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 diff --git a/examples/with-tailwindcss-emotion-twin-macro/package.json b/examples/with-tailwindcss-emotion-twin-macro/package.json new file mode 100644 index 0000000000000..d8317e6a7afc7 --- /dev/null +++ b/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.1.5", + "@emotion/react": "^11.1.5", + "next": "latest", + "react": "^17.0.1", + "react-dom": "^17.0.1" + }, + "devDependencies": { + "@babel/core": "^7.13.8", + "@emotion/babel-preset-css-prop": "^11.2.0", + "babel-plugin-twin": "1.0.2", + "tailwindcss": "^2.0.3", + "twin.macro": "^2.3.0" + }, + "babelMacros": { + "twin": { + "preset": "emotion" + } + } +} diff --git a/examples/with-tailwindcss-emotion-twin-macro/pages/_app.js b/examples/with-tailwindcss-emotion-twin-macro/pages/_app.js new file mode 100644 index 0000000000000..22b6361f3b320 --- /dev/null +++ b/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 ( + <> + + + + ) +} diff --git a/examples/with-tailwindcss-emotion-twin-macro/pages/index.js b/examples/with-tailwindcss-emotion-twin-macro/pages/index.js new file mode 100644 index 0000000000000..bd42322e09224 --- /dev/null +++ b/examples/with-tailwindcss-emotion-twin-macro/pages/index.js @@ -0,0 +1,19 @@ +import Button from '../components/Button' + +export default function Index() { + return ( +
+

+ Tailwind CSS with Emotion.js +

+

+ This example uses twin.macro and{' '} + babel-plugin-twin.
+

+

+ + +

+
+ ) +} diff --git a/examples/with-tailwindcss-emotion-twin-macro/tailwind.config.js b/examples/with-tailwindcss-emotion-twin-macro/tailwind.config.js new file mode 100644 index 0000000000000..f8ec8b4a2c85c --- /dev/null +++ b/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: [], +} From 57dc6f5081815354bc262ddfb034e78f121d9f45 Mon Sep 17 00:00:00 2001 From: Pavel Mineev Date: Thu, 24 Jun 2021 22:59:21 +0300 Subject: [PATCH 2/2] bump deps --- .../package.json | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/examples/with-tailwindcss-emotion-twin-macro/package.json b/examples/with-tailwindcss-emotion-twin-macro/package.json index d8317e6a7afc7..0b1bca469955a 100644 --- a/examples/with-tailwindcss-emotion-twin-macro/package.json +++ b/examples/with-tailwindcss-emotion-twin-macro/package.json @@ -8,18 +8,18 @@ "start": "next start" }, "dependencies": { - "@emotion/styled": "^11.1.5", - "@emotion/react": "^11.1.5", + "@emotion/styled": "^11.3.0", + "@emotion/react": "^11.4.0", "next": "latest", - "react": "^17.0.1", - "react-dom": "^17.0.1" + "react": "^17.0.2", + "react-dom": "^17.0.2" }, "devDependencies": { - "@babel/core": "^7.13.8", + "@babel/core": "^7.14.6", "@emotion/babel-preset-css-prop": "^11.2.0", "babel-plugin-twin": "1.0.2", - "tailwindcss": "^2.0.3", - "twin.macro": "^2.3.0" + "tailwindcss": "^2.2.4", + "twin.macro": "^2.5.0" }, "babelMacros": { "twin": {