64 lines
1.9 KiB
Markdown
64 lines
1.9 KiB
Markdown
# TypeScript React Tailwind Vite Template
|
|
|
|
This template provides a starting point for creating React projects with TypeScript, Tailwind CSS, and Vite.
|
|
|
|
## Overview
|
|
|
|
This template allows you to quickly set up a React project with TypeScript, Tailwind CSS, and Vite. It provides a modern development environment with features such as hot module replacement and fast refresh, making it easy to develop and customize your React applications.
|
|
|
|
## Features
|
|
|
|
- TypeScript: Develop with confidence using static type-checking and improved tooling.
|
|
|
|
- React: Build dynamic user interfaces with the popular React library.
|
|
|
|
- Tailwind CSS: Easily style and customize your components using the utility-first approach of Tailwind CSS.
|
|
|
|
- Vite: Enjoy fast development and instant hot module replacement with Vite's lightning-fast dev server.
|
|
|
|
## Installation
|
|
|
|
To create a new project using this template, follow these steps:
|
|
|
|
1. Ensure that you have Node.js installed on your machine.
|
|
2. Open a terminal and navigate to the directory where you want to create your project.
|
|
3. Run the following command to create a new project using the template:
|
|
|
|
```bash
|
|
npx create-vite@latest --template typescript-react-tailwind-vite my-project
|
|
```
|
|
|
|
Replace my-project with the desired name for your project.
|
|
|
|
4. Once the command completes, navigate into the project directory:
|
|
|
|
```bash
|
|
cd my-project
|
|
```
|
|
|
|
5. Install the dependencies:
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
## Usage
|
|
|
|
To start the development server and run the project, use the following command:
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
This will start the development server and open your project in the browser. Any changes you make to the source code will be automatically reflected in the browser.
|
|
|
|
## Building for Production
|
|
|
|
To build the project for production, use the following command:
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
This will create an optimized build of your project in the dist directory.
|