Scribd
Upload
5 views

To_start_a_React_app_with_Vite_Tailwind_CSS_React_Router_and_Redux_Toolkit

This document provides a step-by-step guide to set up a React application using Vite, Tailwind CSS, React Router, and Redux Toolkit. It includes commands for installation and configuration, as well as example code for setting up routing and basic components. The guide covers the necessary configurations for Tailwind CSS and the structure for defining routes in the application.

Uploaded by

gfdjhkjuy1425
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

To_start_a_React_app_with_Vite_Tailwind_CSS_React_Router_and_Redux_Toolkit

This document provides a step-by-step guide to set up a React application using Vite, Tailwind CSS, React Router, and Redux Toolkit. It includes commands for installation and configuration, as well as example code for setting up routing and basic components. The guide covers the necessary configurations for Tailwind CSS and the structure for defining routes in the application.

Uploaded by

gfdjhkjuy1425
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

To start a React app with Vite,

Tailwind CSS, React Router and


Redux Toolkit

npm create vite@latest my-app --template react


cd my-react-app
npm install

npm install -D tailwindcss postcss autoprefixer


npx tailwindcss init -p

npm install react-router-dom

npm install @reduxjs/toolkit react-redux

1. Tailwind CSS
Configure the tailwind.config.js:

/** @type {import('tailwindcss').Config} */


export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},

To start a React app with Vite, Tailwind CSS, React Router and Redux Toolkit 1
plugins: [],
}

2. react-router-dom

In src/main.jsx , set up the router:

import React from 'react';


import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).rende
r(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);

Create basic routes in src/App.jsx :

import React from 'react';


import { Route, Routes } from 'react-router-dom';

function App() {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>

To start a React app with Vite, Tailwind CSS, React Router and Redux Toolkit 2
);
}

function Home() {
return <h1 className="text-2xl font-bold">Home Page</h1
>;
}

function About() {
return <h1 className="text-2xl font-bold">About Page</h1
>;
}

export default App;

To start a React app with Vite, Tailwind CSS, React Router and Redux Toolkit 3

You might also like