smeijer · February 15, 2021 13:39 · Feb 15, 2021
diff --git a/README.md b/README.md
@@ -0,0 +1,9 @@
+My config for using `twind/shim` with `next.js`, as used for [rake.red](https://rake.red/)
+
+Github Gists don't like slashes in names, so be sure to move `.twind.config.js` out of the `pages` folder.
+
+```
+./twind.config.js
+./pages/_app.js
+./pages/_document.js
+```
diff --git a/_app.js b/_app.js
@@ -0,0 +1,10 @@
+import App from 'next/app'
+import { setup } from 'twind/shim';
+import twindConfig from './twind.config';
+
+// If this run on the server _document.js has already done the setup
+if (typeof window !== 'undefined') {
+  setup(twindConfig);
+}
+
+export default App;
diff --git a/_document.js b/_document.js
@@ -0,0 +1,36 @@
+import Document from 'next/document';
+import React from 'react'
+
+import { setup } from 'twind';
+import { asyncVirtualSheet, shim, getStyleTagProperties } from 'twind/server';
+import twindConfig from './twind.config';
+
+const sheet = asyncVirtualSheet();
+setup({ ...twindConfig, sheet });
+
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    sheet.reset();
+
+    const initialProps = await Document.getInitialProps(ctx);
+    initialProps.html = shim(initialProps.html);
+
+    const { id, textContent } = getStyleTagProperties(sheet);
+
+    const styleProps = {
+      id,
+      key: id,
+      dangerouslySetInnerHTML: {
+        __html: textContent,
+      },
+    };
+
+    return {
+      ...initialProps,
+      styles: [
+        ...initialProps.styles,
+        React.createElement('style', styleProps),
+      ],
+    };
+  }
+}
diff --git a/twind.config.js b/twind.config.js
@@ -0,0 +1,14 @@
+export default {
+  mode: process.env.NODE_ENV === 'production' ? 'silent' : 'warn',
+  theme: {
+    extend: {
+      flex: {
+        0: '0 0 auto',
+      },
+
+      fontFamily: {
+        sans: ['Inter', 'sans-serif'],
+      },
+    },
+  },
+};