> For the complete documentation index, see [llms.txt](https://asamarsal.gitbook.io/notes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://asamarsal.gitbook.io/notes/personal-documentation/react-+-vite-+-tailwind-and-shadcn.md).

# React + Vite + Tailwind\&Shadcn

Website Penting :

```
https://ui.shadcn.com/docs/installation/vite
https://www.npmjs.com/package/@types/react-router-dom
```

Create template

```
npm create vite@latest livecode -- --template react-ts
```

Install tailwind

```
npm install tailwindcss @tailwindcss/vite
```

Ganti semua index.css

```
@import "tailwindcss";
```

Tambahkan di tsconfig.json

```
{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

```

Tambahkan di tsconfig.app.json

```
//{
  //"compilerOptions": {
  
"baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    },
```

Tambahkan code ke cli

```
npm install -D @types/node
```

Copy paste ke vite.config.ts

```
import path from "path"
import tailwindcss from "@tailwindcss/vite"
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})
```

Tambahkan code ke cli

```
npx shadcn@latest init
```

#### Add Components dari shadcn <a href="#add-components" id="add-components"></a>

```
npx shadcn@latest add button
```

Contoh button :

```
import { Button } from "@/components/ui/button"

function App() {
  return (
    <div className="flex flex-col items-center justify-center min-h-svh">
      <Button>Click me</Button>
    </div>
  )
}

export default App
```