Setting Up Project React and TypeScript Application with Vite and Tailwind CSS

#react #typescript #tailwindcss #vite

Prerequisites
Node.js installed on your machine

Steps
1. Create a New Project with Vite
First, create a new React project using Vite. Open your terminal and run the following commands:

npm create vite@latest my-react-app -- --template react-ts
cd my-react-app
npm install

2. Install Tailwind CSS
Next, install Tailwind CSS and its dependencies:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

3. Configure Tailwind CSS
Replace the contents of tailwind.config.cjs with the following configuration:

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. Add Tailwind Directives to Your CSS
Add the following directives to your src/index.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

5. Start the Development Server
Finally, start the development server to see your project in action:

npm run dev

DEV Community