Tailwind CSS

@lazarv/react-server is compatible with Tailwind CSS, both v3 or v4. You can use Tailwind CSS the same way you use it in a standard React project with Vite, using the PostCSS and Autoprefixer plugins when using Tailwind CSS v3 or the official Tailwind CSS plugin when using Tailwind CSS v4.

You can just follow the official Tailwind CSS documentation to install Tailwind CSS v4 in your project at Get started with Tailwind CSS Using Vite.

Install the dependencies:

pnpm add -D tailwindcss @tailwindcss/vite

Add the plugin to your vite.config.js file:

vite.config.js
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
});

Your styles.css file has to import Tailwind CSS:

styles.css
@import "tailwindcss";

The only difference from the offical Vite instructions is that you will import your styles.css file in your server component, instead of an HTML file:

src/pages/index.tsx
import "./styles.css";

export default function HomePage() {
  return <h1 className="text-2xl font-bold">Hello World</h1>;
}

You can now use Tailwind CSS in any of your React Server Components or client components.

Check out the updated Pokémon example to see a complete example on how to use Tailwind CSS v4 with @lazarv/react-server.

You can install Tailwind CSS v3 in your project by running the following command:

pnpm add -D tailwindcss@3 postcss autoprefixer
pnpm dlx tailwindcss@3 init

Add Tailwind CSS to your postcss.config.js file:

./postcss.config.js
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
};

Configure your template paths in the tailwind.config.js file:

./tailwind.config.js
export default {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Update or extend the content array in the tailwind.config.js file to include the paths to your components, pages, and other files including Tailwind CSS classes.

Add the following lines to your main.css file:

./main.css
@tailwind base;
@tailwind components;
@tailwind utilities;

You can now use Tailwind CSS in any of your React Server Components or client components.

./src/pages/index.tsx
import "./main.css";

export default function HomePage() {
  return <h1 className="text-2xl font-bold">Hello World</h1>;
}

You don't need to do anything more. Start your development server and you can see the styles applied.

pnpm react-server

Your styles will be also applied during a production build.

pnpm react-server build