Use With
Setting up Twind for seamless integration in a Remix project.
- 📝 Inspect the example
- 📓 Consult the API reference
- 📜 Read the changelog
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
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.shnpm 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 jsimport { 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 importtw
from the twind package and get the same instance.app/root.jsx diffimport { 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 diffimport { 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.
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 remix components
Start using Twind classes to style your content.
app/routes/index.jsx jsxexport default function Hello() { return <h1 className="text-3xl font-bold underline">Hello world!</h1> }