DEV Community

Anush
Anush

Posted on

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

Top comments (0)