Initial commit from Create Next App

.babelrc

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

.gitignore

@@ -0,0 +1,36 @@
+# 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*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -0,0 +1,27 @@
+# Next.js + Tailwind CSS Example
+
+This example shows how to use [Tailwind CSS](https://tailwindcss.com/) [(v3.0)](https://tailwindcss.com/blog/tailwindcss-v3) with Next.js. It follows the steps outlined in the official [Tailwind docs](https://tailwindcss.com/docs/guides/nextjs).
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-tailwindcss)
+
+[![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&project-name=with-tailwindcss&repository-name=with-tailwindcss)
+
+## 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), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-tailwindcss with-tailwindcss-app
+```
+
+```bash
+yarn create next-app --example with-tailwindcss with-tailwindcss-app
+```
+
+```bash
+pnpm create next-app --example with-tailwindcss with-tailwindcss-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)).

components/ButtonReact.js

@@ -0,0 +1,43 @@
+/* Example with @emotion/react */
+import xw, { cx } from 'xwind'
+
+//"react native style"
+const styles = {
+  button: xw`
+    relative
+    w-64 min-w-full
+    flex justify-center
+    py-2 px-4
+    border border-transparent
+    text-sm leading-5 font-medium
+    rounded-md
+    text-white
+    bg-gray-600
+    hover:bg-gray-500
+    focus[outline-none ring-4 ring-gray-400]
+    active:bg-gray-700
+    transition duration-150 ease-in-out
+  `,
+}
+
+const ButtonReact = ({ className, children, ...props }) => (
+  <button {...props} css={styles.button} className={cx('group', className)}>
+    {/* inline style*/}
+    <span css={xw`absolute left-0 inset-y-0 flex items-center pl-3`}>
+      <svg
+        css={xw`h-5 w-5 text-gray-500 group-hover:text-gray-400 transition ease-in-out duration-150`}
+        fill="currentColor"
+        viewBox="0 0 20 20"
+      >
+        <path
+          fillRule="evenodd"
+          d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
+          clipRule="evenodd"
+        />
+      </svg>
+    </span>
+    {children}
+  </button>
+)
+
+export default ButtonReact

components/ButtonStyled.js

@@ -0,0 +1,49 @@
+/* Example with @emotion/styled */
+import styled from '@emotion/styled'
+import xw, { cx } from 'xwind'
+
+const Button = styled.button(xw`
+  relative
+  w-64 min-w-full
+  flex justify-center
+  py-2 px-4
+  border border-transparent
+  text-sm leading-5 font-medium
+  rounded-md
+  text-white
+  bg-blue-600
+  hover:bg-blue-500
+  focus[outline-none ring-4 ring-blue-400]
+  active:bg-blue-700
+  transition duration-150 ease-in-out
+`)
+
+const IconWrapper = styled.span(xw`
+  absolute left-0 inset-y-0
+  flex items-center
+  pl-3
+`)
+
+const Icon = styled.svg(xw`
+  h-5 w-5
+  text-blue-500
+  group-hover:text-blue-400
+  transition ease-in-out duration-150
+`)
+
+const ButtonStyled = ({ className, children, ...props }) => (
+  <Button {...props} className={cx('group', className)}>
+    <IconWrapper>
+      <Icon fill="currentColor" viewBox="0 0 20 20">
+        <path
+          fillRule="evenodd"
+          d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
+          clipRule="evenodd"
+        />
+      </Icon>
+    </IconWrapper>
+    {children}
+  </Button>
+)
+
+export default ButtonStyled

next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+module.exports = {
+  reactStrictMode: true,
+}