Update README to include installation instructions for React with Vite and TypeScript, and optional tools like TailwindCSS and DaisyUI

README.md

@@ -1,59 +1,92 @@
-# ASPReactDemo
+<h1> ASP Net Core, Nswag, SignalR, React, Syncfusion </h1>
 
-Eine Demo für: 
--ASP Net Core
--Nswag
--SignalR
--React
--Syncfusion
+- [Installation React with Vite and TypeScript](#installation-react-with-vite-and-typescript)
+- [Routing](#routing)
+  - [Install react-router-dom](#install-react-router-dom)
+  - [Update App.tsx](#update-apptsx)
+    - [Update configuration files](#update-configuration-files)
+    - [Update css file](#update-css-file)
+  - [DaisyUI 5](#daisyui-5)
+    - [Install daisyUI](#install-daisyui)
+    - [Update css file](#update-css-file-1)
 
-## Installation React
 
-### With Yarn
+
+# Installation React with Vite and TypeScript
 
 ```bash
-yarn create react-app react-client --template typescript
+# Create a new project using the "react-ts" template
+yarn create vite my-react-app --template react-ts
 
-cd react-client
+# Navigate to the project folder
+cd my-react-app
 
-yarn build
+# Install dependencies
+yarn install
 
-yarn start
 ``` 
-## Installation tailwindcss
 
-### Install and Init
+# Routing
 
+## Install react-router-dom
 ```bash
-yarn add tailwindcss postcss autoprefixer
+yarn add react-router-dom
+```
 
-npx tailwindcss init -p
+## Update App.tsx
+```tsx
+
+
+
+
+
+# Optional Tools
+## tailwindcss
+
+### Install tailwindcss
+```bash
+# Install tailwindcss
+yarn add tailwindcss@latest postcss@latest autoprefixer@latest
+```
+
+### Update configuration files
+```typescript
+# vite.config.ts
+
+import { defineConfig } from 'vite'
+import tailwindcss from '@tailwindcss/vite' // Add this line
+export default defineConfig({
+  plugins: [
+    tailwindcss(),  //Add this line
+  ],
+})
 
 ```
 
-### Configure the tailwind.config.js File
-
-Update the tailwind.config.js file to specify the paths to all of your template files. Replace the default content with the following (if not already present):
-
-```javascript
-module.exports = {
-  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
-  darkMode: false, // or 'media' or 'class'
-  theme: {
-    extend: {},
-  },
-  variants: {
-    extend: {},
-  },
-  plugins: [],
-}
-```
-
-### Add Tailwind directives to your CSS:
 
+### Update css file
 
 ```css
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/*  eg. src/index.css */
+
+@import "tailwindcss";
+
+/* Add your custom styles here */
+```
+
+
+## DaisyUI 5
+
+### Install daisyUI
+```bash
+# Install daisyUI
+yarn add -D daisyui@beta
+```
+### Update css file
+
+```css
+/*  eg. src/index.css */
+@import "tailwindcss"; /* Existing line */
+@plugin "daisyui";
+/* Add your custom styles here */
 ```