Use With

Remix

Setting up Twind for seamless integration in a Remix project.

📝 Inspect the example
📓 Consult the API reference
📜 Read the changelog

Hint

The @twind/with-remix package is deprecated in favor of the @twind/with-react package which is used throughout this guide.

🤝 Compatibility

@twind/with-react	remix
`>=1.0.0 <2`	`1.x`

📦 Installation

Tip

This guide uses renderToString to generate server-side rendered styles. For an example with React v18 and renderToPipeableStream take a look at examples/with-remix_react-v18.

Install from npm
@twind/core and @twind/with-react are available on npm and need to be installed together.
sh
```
npm install @twind/core @twind/with-react
```

Define the configuration

Using an extra file, twind.config.js, allows some tools like IntelliSense to find your configuration.

twind.config.js

import { defineConfig } from '@twind/core'

export default defineConfig({
  /* @twind/with-remix 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 root route
install creates and registers a twind instance that will generate the styles. This allows third-party packages to import tw from the twind package and get the same instance.
app/root.jsx
diff
```
import { Outlet } from "@remix-run/react";

+ import install from '@twind/with-remix'
+ import config from '../twind.config'
+ install(config)

export default function Root() {
```

Enable Twind in the server entry

Enable server-side rendering of all the styles that are used within the HTML and sending them to the client.

app/entry.server.jsx

diff

import { renderToString } from 'react-dom/server'
import { RemixServer } from '@remix-run/react'

+ import inline from '@twind/with-react/inline'

export default function handleRequest(
  request,
  responseStatusCode,
  responseHeaders,
  remixContext,
) {
  let markup = renderToString(<RemixServer context={remixContext} url={request.url} />)

+  // Add twind styles to the markup
+  markup = inline(markup)

  responseHeaders.set('Content-Type', 'text/html')
  return new Response('<!DOCTYPE html>' + markup, {
    status: responseStatusCode,
    headers: responseHeaders,
  })
}

Optional: Install and configure the recommended presets @twind/preset-autoprefix and @twind/preset-tailwind.

Install the presets

All presets are available on npm.

npm 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

import { 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 remix components
Start using Twind classes to style your content.
app/routes/index.jsx
jsx
```
export default function Hello() {
  return <h1 className="text-3xl font-bold underline">Hello world!</h1>
}
```