How to Resolve TailwindCSS Setup Issues in a TODO App

[hirohiro-sys]

In the setup section of a TODO app tutorial, TailwindCSS is not being applied correctly. In the past, with version 3, the command pnpm dlx tailwindcss@3 init successfully applied it, but this is not working now. How should I address this? If it's supposed to be done with version 4, I would like to update the English documentation accordingly.

https://react-server.dev/tutorials/todo-app#project-setup

[lazarv]

Hi @hirohiro-sys,
The correct set of commands for Tailwind 3 would be:

mkdir todo
cd todo
pnpm init
pnpm add @lazarv/react-server better-sqlite3 zod
pnpm add -D @types/better-sqlite3 @types/react @types/react-dom autoprefixer postcss tailwindcss@3 typescript
pnpx tailwindcss@3 init -p

When both installing and using the init command with the Tailwind 3 CLI and properly creating and using a CSS file imported in a server component, Tailwind 3 should still work.

So the only update in the tutorial would be including @3 for tailwindcss for both commands. Please let me know if there's still other issues with Tailwind. Thanks!