Skip to content

Instantly share code, notes, and snippets.

@smeijer
Created February 15, 2021 13:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save smeijer/9d56c86b68479058478063cb6e817397 to your computer and use it in GitHub Desktop.
Save smeijer/9d56c86b68479058478063cb6e817397 to your computer and use it in GitHub Desktop.
twind/shim + nextjs

My config for using twind/shim with next.js, as used for 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
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;
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),
],
};
}
}
export default {
mode: process.env.NODE_ENV === 'production' ? 'silent' : 'warn',
theme: {
extend: {
flex: {
0: '0 0 auto',
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
},
},
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment