React Vite Tailwind.md

React Development

Before You Start

IMPORTANT: Before you begin, make sure you install the latest versions of Node (20.15.0 at time of writing) and PNPM (9.4.0 at time of writing). This also assumes you have Visual Studio Code installed.

---

Create a new Vite/React project. Taken from Scaffolding Your First Vite Project.

# Create react project
$ pnpm create vite@latest my-app --template react

# If using TypeScript...
# pnpm create vite@latest my-app --template react-ts

Initialize git and install dependencies.

# Move into the project folder
$ cd my-app

# Install dependencies
$ pnpm install

# Initialize git repo
$ git init

# Add all files and commit
$ git add .  
$ git commit -m 'Initial commit'

# Open in VS Code
$ code .

Install Tailwindcss

Install and configure Tailwindcss. Taken from Install Tailwind CSS with Vite

# Install tailwind postcss and autoprefixer
$ pnpm install tailwindcss @tailwindcss/vite

Add Tailwind directive to your index.css file.

+ @import "tailwindcss";

API Proxy

If you have a backend API you need to proxy in development. Add the proxy to vite.config.js.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
+  base: '/dashboard',
+  server: {
+    proxy: {
+      '/api': {
+        target: 'https://localhost:7184',
+        changeOrigin: true,
+        secure: false
      }
    }
  }
})

(Optional) Standard Coding Style and Formatting

To enforce a consistent coding style, install StandardJS to the development dependencies.

$ pnpm install -D standard

Add the following line to the scripts section of package.json.

...

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build",
+    "standardjs": "standard --fix"
  },
  
...

Fix all code style violations in the project.

$ pnpm run standardjs

VS Code Extension

VS Code has a Standard JS extension that can automatically underline code style violations in the editor and even auto-fix on save so you don't have to remember to run standard from the command line.