Twind integration for Next.js
npm install @twind/next> Twind integration for Next.js
``sh`
npm install @twind/next
0. Create a twind.config.js (optional)
`js`
/* @type {import('twind').Configuration} /
export default {
theme: {
extend: {
screens: {
standalone: { raw: '(display-mode:standalone)' },
},
},
},
}
1. Create/Update your pages/_app.js
`js
import withTwindApp from '@twind/next/app'
import twindConfig from '../twind.config'
export default withTwindApp(twindConfig)
`
Without a custom twind config
`js
import withTwindApp from '@twind/next/app'
export default withTwindApp()
`
With a custom App component
`js
import withTwindApp from '@twind/next/app'
import twindConfig from '../twind.config'
function MyApp({ Component, pageProps }) {
return
}
export default withTwindApp(twindConfig, MyApp)
`
With a custom App component and no twind config
`js
import withTwindApp from '@twind/next/app'
function MyApp({ Component, pageProps }) {
return
}
export default withTwindApp(MyApp)
`
2. Create/Update your pages/_document.js
`js
import withTwindDocument from '@twind/next/document'
import twindConfig from '../twind.config'
export default withTwindDocument(twindConfig)
`
Without a custom twind config
`js
import withTwindDocument from '@twind/next/document'
export default withTwindDocument()
`
With a custom Document component
`js
import withTwindDocument from '@twind/next/document'
import twindConfig from '../twind.config'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
}
export default withTwindDocument(twindConfig, MyDocument)
`
With a custom Document component and no twind config
`js
import withTwindDocument from '@twind/next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
}
export default withTwindDocument(MyDocument)
`
3. Use twind
`jsx
import NextHead from 'next/head'
import * as React from 'react'
import { tw } from 'twind'
const Home = () => (
<>
}>
font-bold text(center 5xl white sm:gray-800 md:pink-700)
}>
This is Twind!
)
export default Home
`
> TL;DR replace @twind/next/app with @twind/next/shim/app and @twind/next/document with @twind/next/shim/document
0. Create a twind.config.js (optional)
`js`
/* @type {import('twind').Configuration} /
export default {
theme: {
extend: {
screens: {
standalone: { raw: '(display-mode:standalone)' },
},
},
},
}
1. Create/Update your pages/_app.js
`js
import withTwindApp from '@twind/next/shim/app'
import twindConfig from '../twind.config'
export default withTwindApp(twindConfig)
`
Without a custom twind config
`js
import withTwindApp from '@twind/next/shim/app'
export default withTwindApp()
`
With a custom App component
`js
import withTwindApp from '@twind/next/shim/app'
import twindConfig from '../twind.config'
function MyApp({ Component, pageProps }) {
return
}
export default withTwindApp(twindConfig, MyApp)
`
With a custom App component and no twind config
`js
import withTwindApp from '@twind/next/shim/app'
function MyApp({ Component, pageProps }) {
return
}
export default withTwindApp(MyApp)
`
2. Create/Update your pages/_document.js
`js
import withTwindDocument from '@twind/next/shim/document'
import twindConfig from '../twind.config'
export default withTwindDocument(twindConfig)
`
Without a custom twind config
`js
import withTwindDocument from '@twind/next/shim/document'
export default withTwindDocument()
`
With a custom Document component
`js
import withTwindDocument from '@twind/next/shim/document'
import twindConfig from '../twind.config'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
}
export default withTwindDocument(twindConfig, MyDocument)
`
With a custom Document component and no twind config
`js
import withTwindDocument from '@twind/next/shim/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
}
export default withTwindDocument(MyDocument)
`
3. Use twind
`jsx
import NextHead from 'next/head'
import * as React from 'react'
const Home = () => (
<>
This is Twind!
)
export default Home
``