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

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

πŸ‘‹ Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay