TailwindCSS

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

Configure the Vite Plugin

1
// vite.config.mts
2
import { defineConfig } from "vite";
3
import tailwindcss from '@tailwindcss/vite'
4
import { redwood } from "@redwoodjs/sdk/vite";
5

6
export default defineConfig({
7
  plugins: [
8
    redwood(),
9
    tailwindcss(),
10
  ],
11
});

Import Tailwind CSS Create a src/app/styles.css file.
```
1
@import "tailwindcss";
```
Add a <link> to the styles.css file. In the Document.tsx file, within the <head> section, add:
src/app/Document.tsx
```
1
<head>
2
  ...
3
  <link rel="stylesheet" href="/src/app/styles.css" />
4
  ...
5
</head>
```
Now, you can run pnpm run dev and the “Hello World” text should look different.
Terminal window
```
pnpm 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.

1
@import "tailwindcss";
2
@theme {
3
  --color-bg: #e4e3d4;
4
}

Now, this custom color can be used:

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

TailwindCSS

Installing Tailwind

Customizing TailwindCSS

Further reading