Use With
Setting up Twind for seamless integration in a Next.js project.
- 📝 Inspect the example
- 📓 Consult the API reference
- 📜 Read the changelog
🤝 Compatibility
@twind/with-next | next |
---|---|
>=1.0.0 <2 | 12.x , 13.x |
> Next 13 app directory is currently not supported. Please use the legacy app directory for now.
📦 Installation
-
Install from npm
@twind/core
and@twind/with-next
are available on npm and need to be installed together.shnpm install @twind/core @twind/with-next
-
Define the configuration
Using an extra file,
twind.config.js
, allows some tools like IntelliSense to find your configuration.twind.config.js jsimport { defineConfig } from '@twind/core' export default defineConfig({ /* @twind/with-next will use hashed class names in production by default * If you don't want this, uncomment the next line */ // hash: false, })
-
Load Twind in the App component
install
creates and registers a twind instance that will generate the styles. This allows third-party packages to importtw
from the twind package and get the same instance.pages/_app.js jsimport install from '@twind/with-next/app' import config from '../twind.config' export default install(config)
If you are using a custom App component you need to pass the it to
install
.pages/_app.js diff+ import install from '@twind/with-next/app' + import config from '../twind.config' function MyApp({ Component, pageProps }) { /* ... */ } - export default MyApp + export default install(config, MyApp)
-
Enable Twind in Document component
Enable server-side rendering of all the styles that are used within the HTML and sending them to the client.
pages/_document.js jsexport { default } from '@twind/with-next/document'
If you are using a custom Document component you need to pass the it to
install
.pages/_document.js diffimport Document, { Html, Head, Main, NextScript } from 'next/document' + import install from '@twind/with-next/document' class MyDocument extends Document { /* ... */ } + export default install(MyDocument)
-
Optional: Install and configure the recommended presets
@twind/preset-autoprefix
and@twind/preset-tailwind
.Install the presets
All presets are available on npm.
shnpm install @twind/preset-autoprefix @twind/preset-tailwind
Configure the presets
Each preset must be added to the
presets
array in the configuration.twind.config.js jsimport { defineConfig } from '@twind/core' import presetAutoprefix from '@twind/preset-autoprefix' import presetTailwind from '@twind/preset-tailwind' export default defineConfig({ presets: [presetAutoprefix(), presetTailwind()], })
-
Start using Twind in your components
Start using Twind classes to style your content.
pages/index.js jsxexport default function Hello() { return <h1 className="text-3xl font-bold underline">Hello world!</h1> }