📚 Project for Shadcn-Vue with Vue 3 and TailwindCSS@3 (Vite-based)

🚀 How the project was setup

1. Created the project with Vite:

   npm create vite@latest shadcn-vue -- --template vue-js

2. Navigated into the project directory:

   cd shadcn-vue

3. Installed project dependencies:

   npm install

4. Ran the development server:

   npm run dev

5. Installed TailwindCSS, PostCSS, and Autoprefixer:

   npm install -D tailwindcss@3 postcss autoprefixer

6. Initialized TailwindCSS configuration:

   npx tailwindcss init -p

   (This command creates both tailwind.config.js and postcss.config.js files.)

7. Added jsconfig.json
   (This file is used to properly resolve path aliases in your project.)

8. Installed Shadcn-Vue CLI (compatible with TailwindCSS v3):

   npm install -D [email protected]

   (If installing [email protected] does not the packages like class-variance-authority, clsx, reka-ui, tailwind-merge, tailwindcss-animate then you need to manually install them)

   npm i [email protected] [email protected] [email protected] [email protected] [email protected]

9. Initialized Shadcn-Vue:

   npx [email protected] init

   (This command creates a components.json file.)

10. Added a UI component (e.g., Button) using Shadcn-Vue:

    npx [email protected] add button

---

⚡ Running the Project

1. Clone the repository:

   git clone {repository-url}

2. Navigate into the project folder:

   cd {project-name}

3. Install dependencies and start the dev server:

   npm install
   npm run dev

4. Access the application:
   Open your browser and visit: http://localhost:5173

---