Note: Cloudflare, Remix, and Tailwind

7 April 2024 / 2 min read

Last updated: 10 April 2024

At least as of early April, Cloudflare + Remix mostly just work without fuss when bootstrapping a new project using the cloudflare template. The one hang up I ran into was actually getting Tailwind to work.

Fire it up with create-cloudflare cli

Start a new project with the cloudflare remix template and follow the prompts:

npm create cloudflare@latest something -- --framework=remix

See the Cloudflare Pages Remix documentation for more information.

The dir structure

That leaves you with a dir structure similar to this:

.
├── README.md
├── _worker.bundle
├── app
│   ├── entry.client.tsx
│   ├── entry.server.tsx
│   ├── root.tsx
│   ├── routes
│   │   ├── _index.tsx
├── components.json
├── functions
│   └── [[path]].ts
├── load-context.ts
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
├── tsconfig.json
├── vite.config.ts
├── worker-configuration.d.ts
└── wrangler.toml

Note on getting Tailwind working

The Remix docs don’t currently have clear guidance on how to get Tailwind working with a new project - but they do cover it in the vite migration docs. The basic’s are pretty simple:

Basic steps

Install tailwind and any additional deps you want:

npm add -D tailwindcss@latest autoprefixer@latest

Add a postcss.config.mjs file to the root of your project:

cat > postcss.config.mjs <<EOF
export default {
  plugins: {
    tailwindcss: {},
  },
};
EOF

Continuing following the remix docs, we need to add tailwind to our postcss config:

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Setup tailwind config and css (or whatever you want to call it) in your app dir:

npx tailwindcss init -p
mkdir -p app/styles
cat > app/styles/tailwind.css <<EOF
@tailwind base;
@tailwind components;
@tailwind utilities;
EOF

Where you need to deviate from the remix docs is in the tailwind style import instructions. Assuming you add your tailwind.css to app/styles you’ll need to add a regular import to your root.tsx:

import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";
import "~/styles/tailwind.css"; // Add an import for tailwind here

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

export default function App() {
  return <Outlet />;
}

Tracking this down

I don’t run into issues that often but typically the Remix Discord or Github Discussion will have the answer. In this case, I found the answer in a thread on the discord: https://discord.com/channels/770287896669978684/1220098409814298777