next

@twind/next

Twind integration for Next.js

Installation

npm install @twind/next

Usage

0. Create a twind.config.js (optional)

/** @type {import('twind').Configuration} */
export default {
  theme: {
    extend: {
      screens: {
        standalone: { raw: '(display-mode:standalone)' },
      },
    },
  },
}

1. Create/Update your pages/_app.js

import withTwindApp from '@twind/next/app'
import twindConfig from '../twind.config'

export default withTwindApp(twindConfig)

Without a custom twind config

import withTwindApp from '@twind/next/app'

export default withTwindApp()

With a custom App component

import withTwindApp from '@twind/next/app'
import twindConfig from '../twind.config'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default withTwindApp(twindConfig, MyApp)

With a custom App component and no twind config

import withTwindApp from '@twind/next/app'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default withTwindApp(MyApp)

2. Create/Update your pages/_document.js

import withTwindDocument from '@twind/next/document'
import twindConfig from '../twind.config'

export default withTwindDocument(twindConfig)

Without a custom twind config

import withTwindDocument from '@twind/next/document'

export default withTwindDocument()

With a custom Document component

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

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

import NextHead from 'next/head'
import * as React from 'react'
import { tw } from 'twind'

const Home = () => (
  <>
    <NextHead>
      <meta charSet="UTF-8" />
      <title>Twind Next.js Example</title>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
    </NextHead>

    <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>
  </>
)

export default Home

Usage with the shim

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)

/** @type {import('twind').Configuration} */
export default {
  theme: {
    extend: {
      screens: {
        standalone: { raw: '(display-mode:standalone)' },
      },
    },
  },
}

1. Create/Update your pages/_app.js

import withTwindApp from '@twind/next/shim/app'
import twindConfig from '../twind.config'

export default withTwindApp(twindConfig)

Without a custom twind config

import withTwindApp from '@twind/next/shim/app'

export default withTwindApp()

With a custom App component

import withTwindApp from '@twind/next/shim/app'
import twindConfig from '../twind.config'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default withTwindApp(twindConfig, MyApp)

With a custom App component and no twind config

import withTwindApp from '@twind/next/shim/app'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default withTwindApp(MyApp)

2. Create/Update your pages/_document.js

import withTwindDocument from '@twind/next/shim/document'
import twindConfig from '../twind.config'

export default withTwindDocument(twindConfig)

Without a custom twind config

import withTwindDocument from '@twind/next/shim/document'

export default withTwindDocument()

With a custom Document component

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

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

import NextHead from 'next/head'
import * as React from 'react'

const Home = () => (
  <>
    <NextHead>
      <meta charSet="UTF-8" />
      <title>Twind Next.js Example</title>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
    </NextHead>

    <main className="h-screen bg-purple-400 flex items-center justify-center">
      <h1 className="font-bold text(center 5xl white sm:gray-800 md:pink-700)">This is Twind!</h1>
    </main>
  </>
)

export default Home

License

MIT