🚀 React + Vite + Tailwind CSS + Shadcn UI Setup (vanillaJS)

---

title: "🚀 Setting Up a Lightning-Fast React App with Vite, Tailwind CSS, and Shadcn UI" date: 2026-05-10 tags:

• react
• vite
• tailwind-css
• shadcn-ui
• frontend image: "https://images.unsplash.com/photo-1627398242454-45a1465c2479?w=1200&q=80" share: true featured: false description: "Learn how to quickly set up a production-ready React app with Vite, Tailwind CSS, and Shadcn UI, complete with clean alias imports and beautiful, accessible components, all in under 10 minutes."

Introduction

As a frontend developer, setting up a new project can be a daunting task, especially when it comes to choosing the right tools and configurations. However, with the right combination of technologies, you can create a lightning-fast and production-ready React app in no time. In this post, we'll explore how to set up a React app with Vite, Tailwind CSS, and Shadcn UI, all in under 10 minutes.

The combination of Vite, Tailwind CSS, and Shadcn UI provides a powerful and efficient way to build React applications. Vite offers a fast and lightweight development server, while Tailwind CSS provides a utility-first approach to styling. Shadcn UI, on the other hand, offers a set of beautiful and accessible components to get you started. By following this step-by-step guide, you'll be able to create a production-ready React app with clean alias imports and stunning components.

Setting Up the Project

To get started, we'll use the npm create vite@latest command to scaffold a new Vite project. Run the following command in your terminal:

npm create vite@latest my-app

When prompted, select the following options:

• Framework: React
• Variant: JavaScript

This will create a new Vite project with React and JavaScript configured. Next, navigate into the project directory:

cd my-app

Installing Dependencies

To install the required dependencies, run the following command:

npm install

This will install the necessary packages, including React and Vite.

Configuring Tailwind CSS and Shadcn UI

To configure Tailwind CSS and Shadcn UI, we'll need to install the following packages:

npm install -D tailwindcss postcss autoprefixer
npm install @shadcn/ui

Next, create a new file called tailwind.config.js with the following content:

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

This configuration tells Tailwind CSS to look for CSS classes in our React components.

Creating a Clean Alias Import

To create a clean alias import, we'll need to configure Vite to resolve the @/ alias. Create a new file called vite.config.js with the following content:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': '/src',
    },
  },
})

This configuration tells Vite to resolve the @/ alias to the src directory.

Conclusion

In this post, we've explored how to set up a lightning-fast React app with Vite, Tailwind CSS, and Shadcn UI. By following this step-by-step guide, you can create a production-ready React app with clean alias imports and beautiful, accessible components, all in under 10 minutes. With this combination of technologies, you'll be able to build fast, efficient, and scalable React applications with ease. So why wait? Get started today and see the difference for yourself!