Tailwind CSS
Installing Tailwind
Since the RedwoodSDK is based on React and Vite, we can work through the “Using Vite” documentation.
-
Install Tailwind CSS
Terminal window npm i tailwindcss @tailwindcss/viteTerminal window pnpm add tailwindcss @tailwindcss/viteTerminal window yarn 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";export default defineConfig({environments: {ssr: {},},plugins: [redwood(),tailwindcss(),],}); -
Create a
src/app/styles.css
file, and import Tailwind CSSsrc/app/styles.css @import "tailwindcss"; -
Import your CSS and add a
<link>
to thestyles.css
file.
In theDocument.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 addingclassName="bg-blue-500"
to it.` -
Now, you can run
dev
and the element you styled should look different.Terminal window npm run devTerminal window pnpm run devTerminal window yarn 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>