راه اندازی یک React Project با TailwindCSS

Summarize this content to 400 words in Persian Lang
TailwindCSS یک فریم ورک CSS اولین ابزار محبوب است که به توسعه دهندگان اجازه می دهد تا طرح های مدرن و پاسخگو را مستقیماً در نشانه گذاری خود بسازند. هنگامی که با React ترکیب می‌شود، راهی قدرتمند برای ایجاد رابط‌های کاربری تعاملی و شیک با حداقل تلاش ارائه می‌کند. در این مقاله، نحوه راه اندازی یک پروژه React جدید با TailwindCSS را از ابتدا به شما آموزش می دهم.

پیش نیازها

برای پیگیری، باید موارد زیر را روی دستگاه خود نصب کنید:

Node.js (حداقل نسخه 14.x)npm یا Yarn به عنوان مدیر بسته شما (در اینجا از npm استفاده خواهیم کرد)اگر Node.js را نصب نکرده اید، می توانید آن را از وب سایت رسمی دانلود کنید. هنگامی که Node.js را نصب کردید، npm همراه با آن می آید، بنابراین شما آماده هستید!

مرحله 1: یک پروژه React ایجاد کنید

ابتدا بیایید یک پروژه React جدید ایجاد کنیم. ترمینال خود را باز کنید و دستور زیر را اجرا کنید:

npx create-react-app my-tailwind-react-app

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

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

این یک برنامه جدید React را در پوشه ای به نام my-tailwind-react-app ایجاد می کند. می توانید این نام را با نام پروژه دلخواه خود جایگزین کنید.

پس از اتمام نصب، به پوشه پروژه خود بروید:

cd my-tailwind-react-app

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

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

می‌توانید با اجرا کردن، تست کنید که آیا همه چیز کار می‌کند:

npm start

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

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

با این کار سرور توسعه راه اندازی می شود و پروژه شما در مرورگر باز می شود.

مرحله 2: TailwindCSS را نصب کنید

اکنون که یک پروژه اولیه React را راه اندازی کرده ایم، زمان نصب TailwindCSS فرا رسیده است. برای انجام این کار، باید Tailwind و وابستگی های آن را نصب کنیم.

در پوشه پروژه خود دستور زیر را اجرا کنید:

npm install -D tailwindcss postcss autoprefixer

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

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

پس از آن، یک فایل پیکربندی TailwindCSS با اجرای:

npx tailwindcss init

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

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

با این کار یک فایل tailwind.config.js در دایرکتوری پروژه شما ایجاد می شود. فایل پیش فرض چیزی شبیه به این خواهد بود:

/** @type {import(‘tailwindcss’).Config} */
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}

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

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

مرحله 3: Tailwind را برای حذف سبک های استفاده نشده پیکربندی کنید

به طور پیش فرض، TailwindCSS با تمام سبک های خود ارائه می شود که می تواند فایل های CSS شما را بسیار بزرگ کند. برای بهینه سازی اندازه بسته نرم افزاری، باید آن را طوری پیکربندی کنیم که سبک های استفاده نشده در تولید را پاک کند. این کار با افزودن مسیرها به همه فایل‌های قالب (مانند کامپوننت‌های React) در آرایه محتوای tailwind.config.js انجام می‌شود.

tailwind.config.js را تغییر دهید تا همه فایل‌های React شما را شامل شود:

module.exports = {
content: [
“./src/**/*.{js,jsx,ts,tsx}”,
],
theme: {
extend: {},
},
plugins: [],
}

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

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

این پیکربندی به Tailwind می‌گوید که تمام فایل‌های داخل دایرکتوری src را با پسوندهای .js، .jsx، .ts یا .tsx برای کلاس‌های Tailwind اسکن کند و فایل‌های استفاده نشده را در ساخت‌های تولید حذف کند.

مرحله 4: Tailwind را به CSS خود اضافه کنید

بعد، باید TailwindCSS را به فایل CSS پروژه خود وارد کنیم. فایل src/index.css را باز کنید و همه چیز را با موارد زیر جایگزین کنید:

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

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

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

این پایه، مؤلفه و سبک‌های کاربردی Tailwind را به پروژه شما وارد می‌کند.

مرحله 5: استفاده از TailwindCSS را در React Components خود شروع کنید

اکنون که TailwindCSS راه‌اندازی شده است، می‌توانید از کلاس‌های کاربردی آن در مؤلفه‌های React خود استفاده کنید!

به عنوان مثال، src/App.js را باز کرده و به صورت زیر به روز کنید:

function App() {
return (

Start building your awesome React app now 🚀

);
}

export default App;

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

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

در این مثال، ما از چندین کلاس ابزار TailwindCSS برای استایل دادن به کامپوننت خود بدون نوشتن هیچ CSS سفارشی استفاده کرده‌ایم. فقط با تغییر کلاس ها می توانید به سرعت طرح و ظاهر را تنظیم کنید.

مرحله 6: ساخت و استقرار

هنگامی که از پروژه خود راضی هستید و می خواهید آن را برای تولید بسازید، به سادگی اجرا کنید:

npm run build

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

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

React فایل‌های استاتیک بهینه‌سازی شده را تولید می‌کند و Tailwind تمام کلاس‌های CSS استفاده‌نشده را حذف می‌کند و اطمینان حاصل می‌کند که بسته شما تا حد امکان کوچک است.

سپس می توانید پروژه خود را در هر پلتفرم میزبانی مانند Vercel، Netlify یا GitHub Pages مستقر کنید.

نتیجه گیری

راه‌اندازی React با TailwindCSS سریع و آسان است و به شما امکان می‌دهد بدون نوشتن CSS سفارشی، رابط‌های کاربری تمیز و پاسخگو بسازید. با رویکرد کاربردی Tailwind، می‌توانید روی طراحی رابط برنامه خود مستقیماً در JSX خود بدون ترک کد تمرکز کنید.

کد نویسی مبارک!

npx create-react-app my-tailwind-react-app

cd my-tailwind-react-app

npm start

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

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

function App() {
  return (
    

      

        
        
Start building your awesome React app now 🚀
      
    
  );
}

export default App;

npm run build