- First, run the create command:
npm create vite@latest- You'll see these prompts:
npx
create-vite
│
◇ Project name:
│ vite-react-project
│
◇ Select a framework:
│ React
│
◇ Select a variant:
│ JavaScript
│
◇ Scaffolding project in- Navigate to the project directory:
cd vite-react-project- Install dependencies:
npm install- Install Tailwind CSS and its Vite plugin:
npm install tailwindcss @tailwindcss/vite-
Configure the Vite plugin:
- Add the @tailwindcss/vite plugin to your Vite configuration in
vite.config.js:
import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import tailwind from "@tailwindcss/vite"; export default defineConfig({ plugins: [react(), tailwind()], });
- Add the @tailwindcss/vite plugin to your Vite configuration in
-
Import Tailwind CSS:
- Add the following import to your main CSS file (
src/index.css):
@import "tailwindcss";
- Add the following import to your main CSS file (
-
Start the development server:
npm run dev- Start using Tailwind:
- Make sure your compiled CSS is included in the
<head>of your HTML - Begin using Tailwind's utility classes in your components
- Make sure your compiled CSS is included in the
The development server will start at http://localhost:5173/
vite-react-project/
├── public/
│ └── vite.svg
├── src/
│ ├── assets/
│ │ └── react.svg
│ ├── App.css
│ ├── App.jsx
│ ├── index.css
│ └── main.jsx
├── index.html
├── package.json
└── vite.config.js
npm run dev- Starts the development servernpm run build- Builds the app for productionnpm run preview- Locally preview the production build
To integrate ShadCN components into this project, follow these steps:
-
Install ShadCN CLI:
npx shadcn@latest init
-
Validate Configuration: Ensure that your
tsconfig.jsonfile includes the following alias:{ "compilerOptions": { "baseUrl": "./", "paths": { "@/*": ["src/*"] } } } -
Update Vite Config: Add the alias configuration to
vite.config.js:import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import path from "path"; export default defineConfig({ plugins: [react()], resolve: { alias: { "@": path.resolve(__dirname, "./src"), }, }, });
-
Start Using ShadCN Components: Import and use components like
Buttonin your project:import { Button } from "@/components/ui/button"; function Example() { return <Button variant='default'>Click Me</Button>; }
-
Learn More: Visit the ShadCN Documentation for more details.
To add and use the ShadCN Button component in your project, follow these steps:
-
Add the Button Component:
Run the following command to add the
Buttoncomponent:npx shadcn@latest add button
-
Use the Button Component in
App.jsx:Update your
App.jsxfile to use the ShadCNButtoncomponent. Here’s an example:import { Button } from "@/components/ui/button"; function App() { const [count, setCount] = useState(0); return ( <div> <h1 className='text-3xl font-bold'>ShadCN Button Example</h1> <Button onClick={() => setCount((count) => count + 1)}> Count is {count} </Button> </div> ); } export default App;
-
Start the Development Server:
Run the following command to start the development server and see the button in action:
npm run dev
Here is a screenshot of the workspace structure:
