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

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