create-cloudflare-react-tailwind

Create Cloudflare React Tailwind

A modern CLI tool for scaffolding full-stack React applications with Tailwind CSS on Cloudflare Workers, supporting both client-side and server-side rendering architectures with Vite for lightning-fast development.

Features

• Two rendering architectures:
  • Client-Side Rendering: React hydrated on the client, worker as API
  • Server-Side Rendering: React rendered on the worker, web components on client
• Powered by Vite: Fast development and optimized builds
• Tailwind CSS: Utility-first CSS framework
• Multiple Package Manager Support: Works with npm, yarn and bun
• Cloudflare Workers: Deploy your application to the edge

Installation

You don't need to install this package globally. You can use it with npx, npm create, or yarn create.

Usage

Using npx (recommended)

npx create-cloudflare-react-tailwind

Using npm create

npm create cloudflare-react-tailwind

Using yarn create

yarn create cloudflare-react-tailwind

Using bun create

bun create cloudflare-react-tailwind

Project Setup Flow

When you run the command, you'll be guided through a simple setup process:

• Project Name: Enter a name for your project
• Project Type: Choose between client-side or server-side rendering
  • Client-Side: React hydrated on client, worker as API
  • Server-Side: React rendered on worker, web components on client

After completion, the CLI will:

• Clone the appropriate template repository
• Update project configuration files
• Initialize a fresh git repository
• Provide next steps for you to follow

Architecture Options

Client-Side Rendering

In this architecture:

• The Cloudflare Worker serves as an API backend
• React is hydrated on the client-side
• Provides a familiar React SPA development experience

Server-Side Rendering

In this architecture:

• React is rendered on the Cloudflare Worker
• Components are sent to the client as Web Components
• Ideal for performance and SEO optimization

Available Scripts

Once your project is created, you'll have access to the following scripts:

{
	"add-component": "npx shadcn@latest add",
	"build": "vite build",
	"cf-typegen": "wrangler types",
	"deploy": "vite build && wrangler deploy",
	"dev": "vite",
	"lint": "prettier --write . && eslint .",
	"logs": "wrangler tail",
	"start": "wrangler dev",
	"test": "vitest"
}

Development

To start developing your application:

# Navigate to your project directory
cd my-project-name

# Install dependencies
npm install
# or
yarn
# or
bun install

# Start the development server
npm run dev
# or
yarn dev
# or
bun run dev

Deployment

To deploy your application to Cloudflare Workers:

npm run deploy
# or
yarn deploy
# or
bun run deploy

License

MIT