RedwoodSDK Docs — The React Framework for Cloudflare

A step-by-step guide for installing and configuring Tailwind CSS v4 in RedwoodSDK projects, including customization options and font integration techniques.

Installing Tailwind

Since the RedwoodSDK is based on React and Vite, we can work through the "Using Vite" documentation.

Install Tailwind CSS

npm install tailwindcss @tailwindcss/vite

yarn add tailwindcss @tailwindcss/vite

pnpm add tailwindcss @tailwindcss/vite

bun add tailwindcss @tailwindcss/vite

Configure the Vite Plugin

vite.config.mts

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite"; 
import { redwood } from "rwsdk/vite";
import { cloudflare } from "@cloudflare/vite-plugin";

export default defineConfig({
  environments: {
    ssr: {},
  },
  plugins: [
    cloudflare({
      viteEnvironment: { name: "worker" },
    }),
    redwood(),
    tailwindcss() 
  ],
});

Environment Configuration

Tailwindcss currently uses the non-deprecated internal createResolver() vite API method. The code and its docstring indicate that it relies on an ssr being present.

This isn't the case for us, since we only have a worker environment instead of ssr. To prevent builds from getting blocked on this, we stub out the ssr environment here.

Create a src/app/styles.css file, and import Tailwind CSS

src/app/styles.css

@import "tailwindcss";

Import your CSS and add a <link> to the styles.css file.
In the Document.tsx file, within the <head> section, add:

src/app/Document.tsx

import styles from "./styles.css?url"; 
...
<head>
  ...
  <link rel="stylesheet" href={styles} />
  ...
</head>

To test that Tailwind is working, you'll need to style something in your app. Use the Tailwind CSS docs to understand how to use the utility classes.
For example, you can just pick a random element in your app and add a blue background color to it by adding className="bg-blue-500" to it.`

Now, you can run dev and the element you styled should look different.

npm run dev

yarn run dev

pnpm run dev

bun run dev

Customizing TailwindCSS

With Tailwind v4, there is no longer a tailwind.config.js file for customizations. Instead, we use the styles.css file.

All of your customizations should be within a @theme block.

@import "tailwindcss";
@theme {
  --color-bg: #e4e3d4;
}

Now, this custom color can be used:

<div className="bg-bg">
  <h1>Hello World</h1>
</div>

Tailwind CSS

Installing Tailwind

Customizing TailwindCSS

Further reading

On this page