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'], | |
}, | |
}, | |
}, | |
}; |