{"plugin":{"id":1,"name":"cloudflare-react-tailwindcss","icon":"📦","description":"Deploy your project to Cloudflare-pages","longDescription":"# Frame Master Template: Cloudflare Pages + React + Tailwind CSS\n\nA modern, high-performance starter template for building React applications deployed to Cloudflare Pages, styled with Tailwind CSS, and orchestrated by Frame Master.\n\n![Frame Master Template](https://img.shields.io/badge/Frame%20Master-Template-blueviolet)\n![React](https://img.shields.io/badge/React-19-blue)\n![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-4.1-38bdf8)\n![Cloudflare Pages](https://img.shields.io/badge/Cloudflare-Pages-orange)\n![Bun](https://img.shields.io/badge/Bun-1.3-black)\n\n## 🚀 Features\n\n- **React 18/19**: The latest version of React for building interactive UIs.\n- **Tailwind CSS**: Utility-first CSS framework for rapid UI development.\n- **Cloudflare Pages**: Deploys instantly to the edge with global low latency.\n- **Frame Master**: Integrated workflow for seamless development and plugin management.\n- **Bun**: Lightning-fast JavaScript runtime and package manager.\n- **Client-Side HMR**: Instant feedback during development.\n- **TypeScript**: Type-safe development for better code quality.\n\n## 🛠️ Getting Started\n\n### Prerequisites\n\n- [Bun](https://bun.sh) (v1.3 or later)\n\n### Development\n\nStart the development server with Hot Module Replacement (HMR):\n\n```bash\nbun dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `src/pages/index.tsx`. The page auto-updates as you edit the file.\n\n## 📦 Building for Production\n\nTo create a production build:\n\n```bash\nbun run build\n```\n\nThe build artifacts will be stored in the `.frame-master/build` directory (or your configured output directory).\n\n## ☁️ Deployment\n\n### Cloudflare Pages\n\n1. Push your code to a GitHub repository.\n2. Log in to the [Cloudflare Dashboard](https://dash.cloudflare.com/) and go to **Pages**.\n3. Click **Create a project** > **Connect to Git**.\n4. Select your repository.\n5. Configure the build settings:\n   - **Framework preset**: None / Custom\n   - **Build command**: `bun run build`\n   - **Build output directory**: `.frame-master/build`\n6. Click **Save and Deploy**.\n\n## 📂 Project Structure\n\n```\n.\n├── src/\n│   ├── pages/          # Application pages\n│   │   ├── index.tsx   # Home page\n│   │   └── layout.tsx  # Main layout component\n│   ├── shell.tsx       # App shell configuration\n│   └── client-wrapper.tsx\n├── static/             # Static assets (images, global CSS)\n├── frame-master.config.ts # Frame Master configuration\n├── tailwind.config.js  # Tailwind CSS configuration\n├── tsconfig.json       # TypeScript configuration\n└── package.json\n```\n\n## 📄 License\n\nThis project is licensed under the MIT License.","author":"Justin Halle","ownerId":"c166cdde-5f5c-40e5-a3ff-236652fa88a9","category":"cdn","tags":["react","typescript","cloudflare-pages"],"published":true,"githubReleaseUrl":"https://github.com/shpaw415/frame-master-template-cloudflare-pages-react-tailwind/releases/v1.0.0","githubRepoUrl":"https://github.com/shpaw415/frame-master-template-cloudflare-pages-react-tailwind","defaultVersion":"1.0.2","installation":"frame-master create --template cloudflare-react-tailwindcss","features":["layout stacking","CDN ready","React","Static site generation ( SSG )"],"includedPlugins":["frame-master-plugin-tailwind","frame-master-plugin-react-to-html","frame-master-plugin-apply-react"],"previewUrl":"https://frame-master-template-cloudflare-pages-react-tailwind.pages.dev/","createdAt":"2025-11-28T02:21:30.000Z","updatedAt":"2026-01-15T19:10:02.000Z"}}