1. Use With
  2. Remix

Use With

Remix

MIT License Latest Release Github

Setting up Twind for seamless integration in a Remix project.

🤝 Compatibility

@twind/with-remixremix
>=1.0.0-next.1 <11.x

📦 Installation

  1. Install from npm

    twind and @twind/with-remix are available on npm and need to be installed together.

    sh
    npm install @twind/core @twind/with-remix
  2. Define the configuration

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

    twind.config.js
    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,
    })
  3. 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() {
  4. 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'
    
    + import inline from '@twind/with-remix/server'
    
    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,
      })
    }
  5. Optional: Install and configure the recommended presets @twind/preset-autoprefix and @twind/preset-tailwind.

    Install the presets

    All presets are available on npm.

    sh
    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
    js
    import { defineConfig } from '@twind/core'
    import presetAutoprefix from '@twind/preset-autoprefix'
    import presetTailwind from '@twind/preset-tailwind'
    
    export default defineConfig({
      presets: [presetAutoprefix(), presetTailwind()],
    })
  6. 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>
    }