React CRUD App, Vite, Tailwind v4, MockAPI
Overview Build a simple CRUD app with React that talks to a mock API. You can create, read, update, and delete items. Each item has text fields and an image with preview.
Tech stack
- React 18
- Vite
- React Router
- Axios
- Tailwind CSS v4
Prerequisites
- Node 18 or newer.
- npm 9 or newer.
Getting started
-
Create the project npx create-vite@latest react-crud -- --template react cd react-crud
-
Install runtime deps npm i axios react-router-dom
-
Install Tailwind v4 npm i -D tailwindcss @tailwindcss/postcss
-
Add PostCSS config Create postcss.config.js with export default { plugins: { '@tailwindcss/postcss': {} } }
-
Add Tailwind entry Create src/index.css with @import "tailwindcss" @source "../index.html" @source "./**/*.{js,jsx,ts,tsx}"
-
Import Tailwind CSS In src/main.jsx add import "./index.css"
-
Run the app npm run dev Open http://localhost:5173
Build and preview
- Build npm run build
- Preview the build npm run preview