From 1f268bedcbd0bb42674155a904af9658e19da201 Mon Sep 17 00:00:00 2001
From: bravo-kernel <bravo-kernel@users.noreply.github.com>
Date: Thu, 31 Dec 2020 11:47:59 +0100
Subject: [PATCH 1/2] doc: adds next.js to the examples

---
 docs/examples.md | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/docs/examples.md b/docs/examples.md
index 2f11ba18a..b9963ab03 100644
--- a/docs/examples.md
+++ b/docs/examples.md
@@ -124,6 +124,24 @@ render(
 
 > [live and interactive demo](https://esm.codes/#aW1wb3J0IHsgaCwgcmVuZGVyIH0gZnJvbSAnaHR0cHM6Ly9jZG4uc2t5cGFjay5kZXYvcHJlYWN0JwppbXBvcnQgaHRtIGZyb20gJ2h0dHBzOi8vY2RuLnNreXBhY2suZGV2L2h0bScKCmltcG9ydCB7IHR3IH0gZnJvbSAnaHR0cHM6Ly9jZG4uc2t5cGFjay5kZXYvdHdpbmQnCgpjb25zdCBodG1sID0gaHRtLmJpbmQoaCkKCnJlbmRlcigKICBodG1sYAogICAgPG1haW4gY2xhc3NOYW1lPSIke3R3YGgtc2NyZWVuIGJnLXB1cnBsZS00MDAgZmxleCBpdGVtcy1jZW50ZXIganVzdGlmeS1jZW50ZXJgfSI+CiAgICAgIDxoMSBjbGFzc05hbWU9IiR7dHdgZm9udC1ib2xkIHRleHQoY2VudGVyIDV4bCB3aGl0ZSBzbTpncmF5LTgwMCBtZDpwaW5rLTcwMClgfSI+CiAgICAgICAgVGhpcyBpcyBUd2luZCEKICAgICAgPC9oMT4KICAgIDwvbWFpbj4KICBgLAogIGRvY3VtZW50LmJvZHksCikK)
 
+## [Next.js](https://nextjs.org/)
+
+```jsx
+import { tw } from "twind"
+
+export default function IndexPage() {
+  return (
+    <main className={tw`h-screen bg-purple-400 flex items-center justify-center`}>
+      <h1 className={tw`font-bold text(center 5xl white sm:gray-800 md:pink-700)`}>
+        This is Twind!
+      </h1>
+    </main>
+  )
+}
+```
+
+> [live and interactive demo](https://codesandbox.io/s/twind-next-x5gtk)
+
 ## [Svelte](https://svelte.dev/)
 
 ```html

From a4889567b3b6435cd0619f6439fd4ffa288384c7 Mon Sep 17 00:00:00 2001
From: bravo-kernel <bravo-kernel@users.noreply.github.com>
Date: Thu, 31 Dec 2020 12:15:12 +0100
Subject: [PATCH 2/2] adds the toc

---
 docs/examples.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/examples.md b/docs/examples.md
index b9963ab03..208b5ec72 100644
--- a/docs/examples.md
+++ b/docs/examples.md
@@ -13,6 +13,7 @@ Twind is built to work without a framework - eg framework agnostic - but can be
 - [htm/react - React with htm](#htmreact---react-with-htm)
 - [Preact](#preact)
 - [htm/preact - Preact with htm](#htmpreact---preact-with-htm)
+- [Next.js](#nextjs)
 - [Svelte](#svelte)
 - [Web Components - Custom Elements and Shadow DOM](#web-components---custom-elements-and-shadow-dom)
 - [LitElement](#litelement)