DEV Community

Anush
Anush

Posted on

7 1 1 2 1

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

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
Enter fullscreen mode Exit fullscreen mode

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

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

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: [],
}
Enter fullscreen mode Exit fullscreen mode

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

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

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

npm run dev
Enter fullscreen mode Exit fullscreen mode

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay