پروژه React را با Vite ایجاد کنید و Tailwind، shadcn/ui را راه اندازی کنید

Summarize this content to 400 words in Persian Lang
استفاده از Tailwind و shadcn/ui در React رایج است.این نحوه شروع یک پروژه React جدید با Tailwind و shadcn/ui است.

یک پروژه جدید با Vite ایجاد کنید

این دستور را برای ایجاد یک پروژه اجرا کنید

npm create vite@latest

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

دستورالعمل های کنسول را دنبال کنید و پروژه خود را مانند نام پروژه، چارچوب (React)، جاوا اسکریپت یا Typescript (فعلاً تایپ اسکریپت) تنظیم کنید.

Tailwind را نصب کنید

Tailwind و فایل های پیکربندی آن را به پروژه خود اضافه کنید

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

تمام کدهای موجود را حذف کنید و کدهای پایین را در src/index.css اضافه کنید

@tailwind base;
@tailwind components;
@tailwind utilities;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

محتوا را مانند زیر در tailwind.config.js ویرایش کنید

/** @type {import(‘tailwindcss’).Config} */
module.exports = {
content: [“./index.html”, “./src/**/*.{ts,tsx,js,jsx}”],
/** … **/
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مسیرها را پیکربندی کنید

فایل های tsconfig.json و tsconfig.app.json را برای حل مسیرها ویرایش کنیدtsconfig.json

{
“compilerOptions”: {
“baseUrl”: “.”,
“paths”: {
“@/*”: [“./src/*”] }
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

tsconfig.app.json

{
“compilerOptions”: {
// …
“baseUrl”: “.”,
“paths”: {
“@/*”: [
“./src/*”
] }
// …
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

حال باید vite.config.ts را نیز آپدیت کنیم و یک بسته را قبل از فایل نصب کنیم

npm i -D @types/node

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

سپس vite.config.ts را آپدیت کنید

import path from “path”
import react from “@vitejs/plugin-react”
import { defineConfig } from “vite”

export default defineConfig({
plugins: [react()],
resolve: {
alias: {
“@”: path.resolve(__dirname, “./src”),
},
},
})

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

shadcn/ui را راه اندازی کنید

برای راه اندازی این دستور را اجرا کنید

npx shadcn@latest init

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

دستورالعمل های موجود در کنسول را دنبال کنید و پروژه خود را پیکربندی کنیدپیکربندی معمول من به شرح زیر است:

سبک > پیش‌فرض
رنگ پایه > خنثی
متغیرهای CSS > No

اکنون راه اندازی انجام شده است و می توانید کامپوننت ها را اضافه کنیدبرای شروع، دستور اضافه کردن را اجرا کنید

npx shadcn@latest add button

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

سپس می توانید از Tailwind استفاده کنید و جزء دکمه را مانند زیر به پروژه خود اضافه کنید

import { Button } from “@/components/ui/button”

export default function Home() {
return (
<div className=”bg-red-400″>
<Button>Click me</Button>
</div>
)
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

npm create vite@latest

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

@tailwind base;
@tailwind components;
@tailwind utilities;

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"],
  /** ... **/
}

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

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

npm i -D @types/node

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

npx shadcn@latest init

npx shadcn@latest add button

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

export default function Home() {
  return (
    <div className="bg-red-400">
      <Button>Click me</Button>
    </div>
  )
}