Skip to main content

Getting Started

Create React App is deprecated, and instead it is preferrable to use Vite to create a new application from scratch.

Create a project​

Use the latest vite package to create a new project using built-in templates using this command - npm create vite@latest.

Provide a project name, choose a library (react), and TypeScript.

Adding TailwindCSS​

TailwindCSS is a library to provide atomic css classes.

To install TailwindCSS use the following commands.

  1. Install packages

npm install -D tailwindcss postcss autoprefixer

  1. Setup TailwindCSS config

npx tailwindcss init

  1. Setup tailwindcss.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};
  1. Setup postcss.config.js
module.exports = {
  plugins: [require("tailwindcss"), require("autoprefixer")],
};
  1. Import TailwindCSS in main css file
@tailwind base;
@tailwind components;
@tailwind utilities;

Start the React server using Vite​

Run the following command to start a development server and hot-reload - npm run dev