Skip to content

Latest commit

 

History

History
137 lines (105 loc) · 4.03 KB

README.md

File metadata and controls

137 lines (105 loc) · 4.03 KB

Vite React Tailwind Starter

Overview

This Vite React Tailwind Starter is a modern, lightweight template for building React applications. It combines the speed of Vite, the power of React, the flexibility of React Router DOM v6, and the utility-first approach of Tailwind CSS. This template is designed to jumpstart your React projects with a well-structured, maintainable, and scalable foundation.

Table of Contents

Features

  • Fast Development: Leverages Vite for near-instant server start and rapid hot module replacement (HMR).
  • Modern React: Set up with the latest React features and best practices.
  • Flexible Routing: Implements React Router DOM v6 for declarative routing.
  • Responsive Design: Utilizes Tailwind CSS for rapid UI development and responsive layouts.
  • Code Quality: Integrated ESLint and Prettier for consistent code style and quality.
  • Optimized Production Build: Configured for efficient bundling and optimized performance.

Technologies Used

  • React: A JavaScript library for building user interfaces.
  • Vite: A next-generation frontend tooling.
  • React Router DOM v6: Declarative routing for React applications.
  • Tailwind CSS: A utility-first CSS framework for rapid UI development.
  • ESLint: A tool for identifying and fixing problems in JavaScript code.
  • Prettier: An opinionated code formatter.

Project Structure


vite-react-tailwind-starter/
├── public/
├── src/
│ ├── assets/
│ ├── components/
│ │ ├── common/
│ │ └── layout/
│ ├── configs/
│ ├── constants/
│ ├── containers/
│ ├── contexts/
│ ├── hooks/
│ ├── layouts/
│ ├── pages/
│ ├── redux/
│ ├── services/
│ ├── styles/
│ ├── utils/
│ ├── App.jsx
│ └── main.jsx
│ └── RouterTree.js
├── .editorconfig
├── .env.example
├── .eslintignore
├── .eslintrc.cjs
├── .gitignore
├── .prettierignore
├── .stylelintrc
├── index.html
├── jsconfig.json
├── LICENSE
├── package.json
├── postcss.config.js
├── prettier.config.js
├── README.md
├── tailwind.config.js
├── vite.config.js
└── yarn.lock

Getting Started

To get started with this template, follow these steps:

  1. Clone the repository:

    git clone https://github.com/tcdtist/public-vite-react-tailwind-starter.git
cd public-vite-react-tailwind-starter

  2. Install dependencies:

    yarn install

  3. Start the development server:

    yarn dev

  4. Open your browser and navigate to http://localhost:8000 to view the application.

Usage

You can start building your application by:

  • Adding new components in the src/components directory.
  • Creating new pages in the src/pages directory.
  • Defining routes in the src/RouterTree directory.
  • Adding custom hooks in the src/hooks directory.
  • Styling your components using Tailwind CSS classes.

Customization

  • Tailwind CSS: Customize the tailwind.config.js file to adjust the design system.
  • ESLint: Modify .eslintrc.cjs to change linting rules.
  • Prettier: Adjust prettier.config.js for code formatting preferences.
  • Vite: Configure vite.config.js for build optimizations and plugins.

Contributing

Contributions are welcome! If you'd like to contribute, please follow these steps:

  1. Fork the repository.
  2. Create a new branch for your feature or bug fix.
  3. Make your changes and commit them.
  4. Push your branch to your forked repository.
  5. Create a pull request with a description of your changes.

License

This project is licensed under the MIT License. See the LICENSE file for details.