Setting Up a React Tailwind Project with create-react-adam

Adam Sturge | Apr 26, 2026 min read

Overview

This guide walks through setting up a complete React project with Tailwind CSS, TypeScript, and end-to-end testing using create-react-adam as the scaffolding tool. This stack provides a modern, fast, type-safe, CI-ready development environment with minimal configuration required.

For the reasoning behind the stack — why Wouter, why Tailwind 4, what each util does, how Renovate is wired up — see Why I Built create-react-adam (And Why I Reach For It).

What’s Included

The scaffolder includes:

  • Vite - Next generation frontend tooling
  • ReactJS - UI library
  • TypeScript - Type safety
  • Wouter - Lightweight routing library
  • Tailwind CSS - Utility-first CSS framework
  • React Icons - Icon library
  • Playwright - End-to-end testing (optional, via --with-e2e)
  • Allure - Test reporting
  • Eslint - Linting with TypeScript, React hooks, and accessibility plugins
  • Prettier - Code formatting with import organization and Tailwind class sorting
  • GitHub Actions CI workflows preconfigured
  • Exact dependency pinning (no floating versions)

Steps

  1. Create the project using npx:
npx create-react-adam@latest my-app --with-e2e --with-utils
  1. Navigate to the project directory:
cd my-app
  1. Start the development server:
npm run dev

This will serve your app with hot reloading at http://localhost:5173.

Best Troubleshooting Commmand

npm run itDoesNotWork

Available flags

  • --with-e2e - Include Playwright end-to-end testing setup
  • --no-e2e - Skip the e2e testing setup
  • --with-utils - Include utility helpers
  • --dir - Specify a custom directory path

Additional Commands

Linting your code

npm run lint

Formatting your code

npm run format

Building for production

npm run build

Previewing the production build

npm run preview

Deploying to Cloudflare Pages

Once the production build works, see Deploying a React Site to Cloudflare Pages for the Git-connected static deploy and the _redirects file you’ll need for client-side routing.

Running end-to-end tests

# Run tests in the terminal
npm run test:e2e

# View and interact with tests via UI
npm run test:e2e:ui

# Generate the Allure report
npm run test:e2e:report

Common Issues

  • Node.js version compatibility: Ensure you’re using a recent LTS version of Node.js
  • Port conflicts: If port 5173 is in use, Vite will automatically try the next available port
  • Missing dependencies: If you encounter errors about missing packages, run npm install again
  • TypeScript errors: The setup ships with strict TypeScript settings; follow the error messages to fix type issues
  • Playwright browsers not installed: If e2e tests fail to launch, run npx playwright install

Additional Notes

  • The setup includes pre-configured linting rules and Prettier formatting (with Tailwind class sorting)
  • Tailwind is configured out of the box and ready to customize
  • Wouter is used in place of React Router for a smaller, simpler routing footprint
  • Playwright + Allure provides full e2e coverage with rich reporting
  • GitHub Actions workflows are included for code checks and testing on every push
  • Dependencies are pinned to exact versions to keep builds reproducible
  • The project uses Vite’s fast HMR (Hot Module Replacement) for a smooth development experience