Skip to content
RedwoodSDK
4th April 2025: This is a preview, whilst production-ready, it means some APIs might change

Tailwind CSS

Installing Tailwind

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

  1. Install Tailwind CSS

    Terminal window
    npm i tailwindcss @tailwindcss/vite

  2. 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()
      ],
    });

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

    src/app/styles.css
    @import "tailwindcss";

  4. 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>

  5. 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.`

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

    Terminal window
    npm 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>

Further reading